同じクラスのすべての要素の背景色を変更します

Question

私は、クラスと一致するリンクとテーブル行を持っています。リンクをクリックすると、同じクラスの行の背景色を変更したいと思います。それぞれのケースについて、同じクラスの行が1つしかありません。

ここに私の現在の機能があります。ここ

<script type="text/javascript"> 

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

は、テーブルの行のスクリプトの一部である：

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

表の行は、2つのクラスがあり、私がアドレス指定されるものであることが第1（番号）が必要。

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

.buttonは、変更したいクラスのdata-classを追加し、ボタンに適用するクラスです：現在のコードは

Answer 1

あなたはいくつかのエラーを持っています。あなたはIDを持つクラスを混合してもclassプロパティが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> 

チェックこのjsfiddle

Answer 2

jQueryのそれを簡素化し、「無効または不正な文字列が指定された」エラーになりますの背景色、およびdata-colorは、変更したい色です。

Answer 3

また）（querySelectorAllでjQueryをすることなく、簡単にそれを行うことができます。

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