jquery - jquery 选择器选择与单击的元素不同的元素

Question

这是简化的html：

<div id="l01">
<ul style="width:450px;">
<li><img src="images/iconarrow.gif" alt="arrow" width="9" height="11" align="left" />&nbsp;
<a href="#">Preview</a>                            
</li>

<li class="showStats"><a class="showstatlink" href="javascript:{}"><img class="sstatsImage" src="images/iconarrow.gif"  />&nbsp;
                        Show Stats</a>                            
</li>                         
</ul>                       
</div>
<div class="sstatsDetails">
        ...
</div>

我想点击 class='showstatlink'，我希望点击触发 class='sstatsDetails' 的切换，但只有下一个，我不希望页面上的所有元素与该类切换.

Answer 1

$(".showstatlink").click(function() {
    // Your code to handle the event.
    $(".sstatsDetails").show();  // Or hide whatever you want to do.
});

Answer 2

尝试这样的事情：

$(".showstatlink").on("click", function(){
    $(this).parent().parent().parent().next(".sstatsDetails").toggle();
});

你可以在这里看到它的实际效果。