显示两个表行

Question

我想显示/隐藏使用jQuery的表的下两行。下面的代码目前显示了tr类 - quest_image，但不是类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/

为什么一个切换工作，而不是其他？

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