Если щелкнуть один элемент, удалите другие предметы?

Question

Я изучаю Javascript и jQuery, и я застрял в этой проблеме. Скажем, мой код выглядит следующим образом:

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

Теперь, если я нажимаю одну из Див, я хочу, чтобы другие из них, чтобы исчезнуть. Я знаю, я мог бы создать 4 функции для каждого из них с on.click hey и display none с how, are и you. Но есть ли более простой способ? Бьюсь об заклад, есть, возможно, classes?

Спасибо, что ответили!

Answer 1

Используйте siblings, чтобы получить ссылку на его «братьев».

_{Учитывая объект JQuery, представляющий собой набор элементов DOM, в .siblings() метод позволяет нам искать через братьев и сестер этих элементов в дереве DOM и создать новый объект JQuery из согласующих элементов.}

$('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>

Или вы можете скрыть все остальные div, которые не щелкнул элемент, используя not

_{Удалить элементы из набора совпавших элементов.}

$('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> 

И написать функцию JS OnClick.

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(); 
}); 

Но используя тумблер вместо скрыть звучит логично,

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

Поскольку вы можете выполнять ту же операцию по всем элементам ,

Answer 6

Для этого примера вам не нужно добавлять никаких дополнительных селекторов для таргетинга на div, хотя на самом деле - это решение приведет к тому, что все div на странице будут затронуты - добавление классов будет моим фактическим предложением: - но это работает для этого примера. Нажмите div, и все divs будут скрыты, после чего появится щелчок. Я также добавил кнопку сброса, чтобы разрешить все divs снова появиться.

$('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>