2016-12-12 24 views
0

からtd:n番目のベースを使用してクラスを変更します。:nthセレクタを使用してクラスを変更するためにjQueryのテーブルデータにアクセスしようとしましたが、動作しません。たぶん私は何かが恋しいです。以下のサンプルコードを参照してください:あなたの現在のコードあたりのは、文字列barとして使用されているように、可変bar番号:

$(function(){ 
 
    $("#hit").click(function() { 
 
    bar = +($('#num').text()) + 1; 
 
    $("tr td:nth-child(bar)").toggleClass('on'); 
 
    }); 
 
});
.on { 
 
    background-color: green; 
 
} 
 

 
.off { 
 
    background-color: grey; 
 
} 
 

 
table { 
 
    border: 1px solid black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="num">1</div> 
 
<br> 
 
<table> 
 
    <tr> 
 
    <td class="on">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    </tr> 
 
</table> 
 

 
<br> 
 
<button id="hit">Hit me!</button>

+1

あなたはバー変数を '$(" tr td:nth-​​child(bar) ")'で正しく連結していません。また、あなたがそれを修正したと仮定すると、あなたのロジックは、すべてのコードが ''からonクラスを追加して削除するので、欠陥があるようです。だから、それはどちらかになります。 "' – j08691

+0

ありがとうございます@ j08691 – claudios

答えて

1

$(function(){ 
 
    $("#hit").click(function() { 
 
    bar = +($('#num').text()) + 1; 
 
    $("tr td:nth-child("+bar+")").toggleClass('on off'); 
 
    }); 
 
});
.on { 
 
    background-color: green; 
 
} 
 

 
.off { 
 
    background-color: grey; 
 
} 
 

 
table { 
 
    border: 1px solid black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="num">1</div> 
 
<br> 
 
<table> 
 
    <tr> 
 
    <td class="on">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    </tr> 
 
</table> 
 

 
<br> 
 
<button id="hit">Hit me!</button>

私はあなたがトグルで両方のクラスを持っている必要がありますoffあなたがonを切り替えたいと思います。 また、正しく連結されています

+0

これは正解ですし、クラスのためです。 – claudios

+0

幸せなコーディングメイト:)喜んで助ける – guradio

1

使用することは、適切ではない、あなたは

... 
$("tr td:nth-child(bar)").toggleClass('on'); 
... 

を変更する必要があります〜

... 
$("tr td:nth-child(" + bar + ")").toggleClass('on'); 
... 
+0

ありがとうございます。これは正しいです。 – claudios

1

機能が少しオフになっています。まず、変数としてbarを参照するのではなく、セレクタ文字列に文字列 "bar"を入れるだけです。第2に、toggleClass()は問題ありませんが、.onと.offの両方を切り替える必要があります。そうしないと、ブラウザは両方のスタイルを適用しようとします( ".off"はn番目の子供のクラスです)。コードについては、以下を参照してください。同じよう

$(function(){ 
 
    $("#hit").click(function() { 
 
    bar = +($('#num').text()) + 1; 
 
    $("tr td:nth-child(" + bar + ")").toggleClass('on off'); 
 
    }); 
 
});
.on { 
 
    background-color: green; 
 
} 
 

 
.off { 
 
    background-color: grey; 
 
} 
 

 
table { 
 
    border: 1px solid black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="num">1</div> 
 
<br> 
 
<table> 
 
    <tr> 
 
    <td class="on">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    <td class="off">&nbsp;</td> 
 
    </tr> 
 
</table> 
 

 
<br> 
 
<button id="hit">Hit me!</button>

をさておき、ここにあなたがしたいかもしれないいくつかの他のものがあります: - クリックした後、$(「#numの」)の値を更新しますイベントが発生しました - n番目の子が存在することを確認してください。

+0

ありがとう男これは正しいです! – claudios