如果一個項目被點擊，刪除其他項目？

Question

我正在學習Javascript和jQuery，而我被困在這個問題中。假設我的代碼如下所示：

<div id="hey"> hey </div> 
<div id="how"> how </div> 
<div id="are"> are </div> 
<div id="you"> you </div> 

現在，如果我點擊其中一個div，我希望其他的消失。 我知道，我可以用on.click hey和display none與how,are和you爲它們中的每一個創建4個函數。但有沒有更簡單的方法？我敢打賭，有可能是classes？

感謝您的回覆！

Answer 1

使用siblings來參考其「兄弟」。

_{如果提供的jQuery代表了一組DOM元素，（）方法允許我們通過在DOM樹中這些元素的兄弟姐妹搜索並從匹配元件構造一個新的jQuery對象的.siblings。}

$('div').click(function(){ 
 
    $(this).siblings().hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>

或者你可以隱藏所有不點擊的元素使用not

_{取下匹配的元素集合的元素其他div。}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>

Answer 2

你可以只隱藏點擊股利siblings()。

$('div').click(function() { 
 
    $(this).siblings().fadeOut() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey">hey</div> 
 
<div id="how">how</div> 
 
<div id="are">are</div> 
 
<div id="you">you</div>

Answer 3

您可以使用not避免元素和this會顯示當前實例。

$(document).ready(function(){ 
 
    $("div").on("click",function(){ 
 
    $("div").not(this).hide("slow"); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>

Answer 4

分配一個類的每個元素：

<div id="hey" class='sth'> hey </div> 
<div id="how" class='sth'> how </div> 
<div id="are" class='sth'> are </div> 
<div id="you"class='sth' > you </div> 

和的onclick寫信js函數。在此功能從「本」元素

1. 刪除類「某事」
2. 隱藏所有類「某事」 $('.sth').hide();

Answer 5

呀有一些更簡單的方法，我可以告訴一個元素一個從它，

設置公共類的所有，你是要去的目標要素，

<div class="clickable" id="hey"> hey </div> 
<div class="clickable" id="how"> how </div> 
<div class="clickable" id="are"> are </div> 
<div class="clickable" id="you"> you </div> 

而且你必須使用一個類選擇到一個單一的點擊事件綁定，

$(".clickable").on("click", function(){ }); 

現在使用.siblings()功能隱藏需要的元素，

$(".clickable").on("click", function(){ 
    $(this).siblings(".clickable").hide(); 
}); 

但是使用肘，而不是hide會聽起來合乎邏輯，

$(".clickable").on("click", function(){ 
    $(this).siblings(".clickable").toggle(); 
}); 

由於您可以對所有元素執行相同的操作。

Answer 6

對於這個例子 - 你不需要添加任何進一步的選擇器來定位div的，儘管在現實中 - 這個解決方案將導致頁面上的所有div受到影響 - 添加類將是我的實際建議： - 但是這個適用於這個例子。點擊一個div，所有的div都隱藏，然後點擊一個div。我還添加了一個重置​​按鈕以允許所有div重新出現。

$('div').click(function(){ 
 
    $('div').hide(); 
 
    $(this).show(); 
 
}); 
 

 
    $('#reset').click(function(){ 
 
    $('div').show(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div> 
 
<hr/> 
 
<button type="button" id="reset">Reset</button>

Answer 7

$(document).ready(function(){ 
 
    $("div").on("click",function(){ 
 
    $("div").not(this).toggle("slow"); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hey"> hey </div> 
 
<div id="how"> how </div> 
 
<div id="are"> are </div> 
 
<div id="you"> you </div>