-1

jquery を使用して、テーブルの次の 2 行を表示/非表示にしようとしています。以下のコードは現在、クラス quest_image の tr を示していますが、クラス quest_text は示していません。

<table id="my_table">
<tr>
    <td><img alt="Show/Hide" src="img.gif" class="ShowHide"></td>
    <td>text 1</td>
</tr>
<tr class="quest_image">
    <td colspan="2">hidden text 1</td>
</tr>
<tr class="quest_text">
    <td colspan="2">hidden text 3</td>
</tr>
<tr>
    <td><img alt="Show/Hide" src="img.gif" class="ShowHide"></td>
    <td>text 2</td>
</tr>
<tr class="quest_image">
    <td colspan="2">hidden text 4</td>
</tr>
<tr class="quest_text">
    <td colspan="2">hidden text 2</td>
</tr>

</table>
<script type="text/javascript" src="../jquery/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
// bind click event ONCE to the table
// not to every .ShowHide
$('#my_table').click(function(event){

    // find where the click originated from
    var trigger = event.target;

    // if it has a class of "ShowHide"
    // THEN toggle the next row
    if(trigger.className == 'ShowHide')
    {
        // toggle away
        $(trigger).closest('tr').next('.quest_text').toggle();
        $(trigger).closest('tr').next('.quest_image').toggle();
    }
});
</script>

デモ: http://jsfiddle.net/7TzJL/

1 つのトグルが機能するのに、もう 1 つのトグルが機能しないのはなぜですか?

4

1 に答える 1

1

next()セレクターが一致した場合、すぐ次の要素を返します。セレクターが一致する最も近い要素は選択されません。nextAll()使用して最初の一致に制限する必要があります。

また、jQuery 1.7には.on()、複雑なクラスチェックを削除して、イベントをクラスに直接バインドできるようになっています。すべてをdocument.readyイベントでラップすることを忘れないでください。

$( function() {
    $('#my_table').on( 'click', '.ShowHide', function() {
        var $trigger = $( this );
        $trigger.closest( 'tr' ).nextAll('.quest_text:first').toggle();
        $trigger.closest( 'tr' ).nextAll('.quest_image:first').toggle();
    });
});

デモ： http： //jsfiddle.net/MaPaX/

于 2012-08-04T13:32:18.513 に答える