Zmiana koloru tła wszystkich elementów o tej samej klasie

Question

Mam łącze i wiersz tabeli, które mają pasujące klasy. Po kliknięciu łącza chciałbym zmienić kolor tła wiersza z tą samą klasą. Dla każdego przypadku będzie tylko jeden wiersz z tą samą klasą.

Oto moja aktualna funkcja.

<script type="text/javascript"> 

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

Oto część skryptu wiersza tabeli:

<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> 

wiersz tabeli ma dwie klasy, a ja potrzebuję drugi (liczba), aby być tym, czym jest skierowana. Obecny kod daje błąd „nieprawidłowy lub nielegalny łańcuch został określony”

Answer 1

Masz kilka błędów. Ty mieszane zajęcia z identyfikatorami, a także właściwość class jest rzeczywiście 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> 

Sprawdź to jsfiddle

Answer 2

jQuery upraszcza go:

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

.button jest klasa zastosować do przycisku, dodać data-class dla klasy, którą chcesz zmienić kolor tła, a data-color to kolor, który chcesz zmienić.

Answer 3

Można również zrobić to łatwo bez jQuery z querySelectorAll():

<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>