2013-01-13 40 views
8

私は、クラスと一致するリンクとテーブル行を持っています。リンクをクリックすると、同じクラスの行の背景色を変更したいと思います。それぞれのケースについて、同じクラスの行が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を追加し、ボタンに適用するクラスです:現在のコードは

答えて

8

あなたはいくつかのエラーを持っています。あなたは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

+1

これは私にとってはるかに最善の方法です。奇妙なid/classの組み合わせを保存する理由はなく、jQueryは非常に単純な操作のために残忍です。 – Bubbles

+0

申し訳ありませんが、誤って間違ったコードを投稿しました。ただ1つの最終的な質問...私は各行に2つのクラスが割り当てられていることに気付きました...スクリプトは自動的に最初のものを割り当て、この広告はスペースで区切られた別のものを割り当てます。このような状況にどう対処することができますか?私はいつもこの関数に2番目のクラスを送りたいと思っています。 –

+0

ただ '' 'this.className'''を' '' this.className.split( '')[1] '' 'に置き換えてください – drinchev

4

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

+0

は、私はそれを動的に作るのですかまず、私はjQueryのが、2つの質問ではかなり新しいです実際のですか?クラス名はすべてスクリプトによって作成されます。また、パラメータリストの後に「)missing」というエラーが表示され、テストしようとしています。 –

+1

更新されました。もう一つの注意:ページ上で同じ 'id'を何度も使わないでください。無効です。 – Mooseman

4

また)(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> 
+0

はすばらしい、ありがとう! –

関連する問題