如何使用jQuery定位未被點擊的同一類的項目？

Question

我所擁有的是同一類3個div，但有一個唯一的id，當我單擊一個框時，我想隱藏另一個2.

這不是問題，我可以通過幾個如果/ elses或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')性能結果 - 毫無疑問這將不顯着，但沒有理由不這樣做。

Answer 2

要隱藏點擊的div的siblings：

$('.box').click(function() { 
    $(this).siblings().hide("slow"); 
}); 

Answer 3

試試這個：

$(document).ready(function() { 
    $(".box").bind("click", function(){ 
     $(".box").hide("slow"); 
     $(this).show(); 
    }); 
} 

Answer 4

$('.box').click(function() 
{ 
    var bTrigger = $(this); 
    $('.box').each(function() 
    { 
     if($(this) != bTrigger) $(this).hide('slow'); 
    }); 
}); 

Answer 5

，如果你想隱藏除點擊一個所有.box的：

$('.box').click(function() { 
    $('.box').not(this).hide('slow');  
});