Tüm sınıfların arka plan rengini aynı sınıfla değiştirme

Question

Eşleşen sınıflara sahip bir bağlantı ve bir tablo satırım var. Bağlantı tıklandığında, satırın arka plan rengini aynı sınıfla değiştirmek isterim. Her durumda, aynı sınıfa sahip sadece bir satır olacaktır.

İşte şu anki işlevim. İşte

<script type="text/javascript"> 

function check(x) { 
    elements = document.getElementsByClassName(x); 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].bgColor="blue"; 
    } 
} 
</script> 

tablo satırı senaryonun bir parçasıdır:

<tr class="alt1 12"> 
<td width="50" height="55"> 
<img src="iPhone/statusicon/12.png" alt="" id="forum_statusicon_12" border="0"></td> 
<td> 
<div class="forumtitle"> 
<a class="forumtitle 12" href="forumdisplay.php?f=12" action="async" onclick="check(this.className.split(' ')[1])">News and Current Events</a></div> 
</td> 
<td width="25"> 
<div class="forumarrow"><img src="iPhone/chevron.png" alt="" border="0"></div> 
</td> 
</tr> 

tablo satırı iki sınıf vardır ve ben ele ne olması ikincisini (sayı) gerekir.

$(".button").click(function(){ 
var class = $(this).attr("data-class"); 
var color = $(this).attr("data-color"); 
$("."+class).css("background-color",color); 
}); 

.button, düğme için geçerli değiştirmek istiyoruz sınıf için data-class eklemek için sınıftır: geçerli kod

Answer 1

Birkaç hatalar var. Sen kimlikli sınıfları karıştırılır ve ayrıca class mülkiyet className

<script type="text/javascript"> 

function check(x) { 
    elements = document.getElementsByClassName(x); 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].style.backgroundColor="blue"; 
    } 
} 

</script> 

<a href="#" class="first" onclick="check(this.className)">change first row</a> 
<a href="#" class="second" onclick="check(this.className)">change second</a> 
<!--  FIX (id -> class)    FIX (class -> className) --> 
<table> 
<tr class="first"> 
<td>test1</td> 
</tr> 


<tr class="second"> 
<!--FIX (id -> class) --> 
<td>test2</td> 
</tr> 
</table> 

Kontrol bu jsfiddle

Answer 2

jQuery bunu kolaylaştırır "Geçersiz veya yasa dışı dize belirtilen" hatası veriyor Arka plan rengi ve data-color, değiştirmek istediğiniz renktir. Ayrıca querySelectorAll() ile jQuery olmadan kolayca yapabilirsiniz

Answer 3

:

<script type="text/javascript"> 

function check(selector) 
{ 
    var elements = document.querySelectorAll(selector); 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].style.backgroundColor = "blue"; 
    } 
} 
</script> 

<a href="#" class="first" onclick="check('.' + this.className)">change first row</a> 
<a href="#" id="second" onclick="check('#' + this.id)">change second</a> 

<table> 
<tr class="first"> 
    <td>test1</td> 
</tr> 


<tr id="second"> 
    <td>test2</td> 
</tr>