jquery - 如何使用 jQuery 定位未点击的同一类项目？

Question

我拥有的是同一类的 3 个 div，但具有唯一的 id，当我单击一个框时，我想隐藏其他 2 个框。

这不是问题，我可以通过一些 if/else 或 case 语句来实现它，但我想知道是否有一种更通用/有效的方法来隐藏同一类的所有元素，而不是被点击的那个？

<div id="boxes">
    <div id="box1" class="box">Box 1</div>
    <div id="box2" class="box">Box 2</div>
    <div id="box3" class="box">Box 3</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('.box').click(function() {
        $(this).html('hi');
        if ($(this).attr('id') == 'box1')
        {
            $('#box2').hide('slow');
            $('#box3').hide('slow');
        }
       .......... more if's     
    });
});
</script>

Answer 1

您可以使用.not过滤功能引用“其他”框。这样，即使框不一定是 DOM 树中的同级，或者存在一些不是框的其他同级，代码也将正常工作。

var $boxes = $('.box');
$boxes.click(function() { 
    $(this).html('hi'); 
    $boxes.not(this).hide('slow');
}); 

请注意，我正在缓存 $('.box') 的结果以提高性能 - 毫无疑问，它不会引人注目，但没有理由不这样做。