1

HTML:

<tr>
    <td><div class="color">Stuff</div></td>
    <td><div class="color">Stuff</div></td>
    // etc.
</tr>
<tr>
    <td><div class="color">Stuff</div></td>
    <td><div class="color">Stuff</div></td>
    // etc.
</tr>

特定の行はすべて<td>特定の色になります。表のセルをクリックすると、 clicked に黒い境界線を追加し、<td>クリックされた行 (他の行ではなく) の黒い境界線が既にあるセルから黒い境界線を削除します。これどうやってするの？

jQuery (動作しません):

<script type="text/javascript">
$(document).ready(function() {
    $("div.color").click(function() {
        $(this).siblings().removeClass('black_border');
        $(this).addClass('black_border');
    });
});
</script>
4

3 に答える 3

1 
$(this).closest('tr').find('td').removeClass('black_border');
于 2012-10-10T21:57:24.773 に答える
1

それを考えると (stopPropagation()またはreturn falseクリック ハンドラーで を選択した場合を除き)、クリックは要素にバブル アップします。jQuery で をtdターゲットにするだけです。td

$("td").click(function() {
    $(this).siblings().removeClass('black_border');
    $(this).addClass('black_border');
});

または、少し異なります：

$("td").click(function() {
    $(this).closest('tr').find('.black_border').removeClass('black_border');
    $(this).addClass('black_border');
});

そして、$(this)複数回使用していることを考えると、毎回 jQuery オブジェクトを再作成するのではなく、それをキャッシュする価値があります。

$("td").click(function() {
    var that = $(this);
    that.closest('tr').find('.black_border').removeClass('black_border');
    that.addClass('black_border');
});
于 2012-10-10T21:58:21.057 に答える
0

$("div.color").on('クリック',関数() {

var $td= $(this).parent();
$td.siblings('.black_border').removeClass('black_border');
$td.addClass('black_border');

});

于 2012-10-10T22:06:37.710 に答える