Modifica del colore di sfondo di tutti gli elementi con la stessa classe

Question

Ho un collegamento e una riga di tabella che hanno classi corrispondenti. Quando si fa clic sul collegamento, vorrei cambiare il colore di sfondo della riga con la stessa classe. Per ogni caso, ci sarà solo una riga con la stessa classe.

Ecco la mia funzione corrente.

<script type="text/javascript"> 

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

Ecco una parte dello script riga della tabella:

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

La riga della tabella ha due classi, e ho bisogno il secondo (il numero) di essere ciò che è indirizzato. Il codice attuale dà l'errore "una stringa non valida o illegale è stato specificato"

Answer 1

avete diversi errori. È mescolato classi con ids e anche la proprietà class è in realtà 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> 

Scegli questa jsfiddle

Answer 2

jQuery semplifica:

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

.button è la classe da applicare al tasto, aggiungere data-class per la classe che si desidera modificare il colore di sfondo di, e data-color è il colore in cui vorresti cambiarlo.

Answer 3

È anche possibile farlo facilmente senza jQuery con 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>