несколько селекторов с теми же классами, как настроить функцию щелчка?

Question

увидеть следующую jsfiddle: («синий„) https://jsfiddle.net/haq8jzg1/

Я не хочу, чтобы каждый $ (“. Синий») для переключения на щелчок, вместо этого, я только хочу следующий $, чтобы показать.

$('.red').on('click', function(){ 
    $('.red').closest('.blue').toggle(); 
}); 

<div class="red"></div> 
<div class="green"></div> 
<div class="blue"></div> 

<div class="red"></div> 
<div class="green"></div> 
<div class="blue"></div> 

<div class="red"></div> 
<div class="green"></div> 
<div class="blue"></div> 

<div class="red"></div> 
<div class="green"></div> 
<div class="blue"></div> 

Я пытался реализовать closest(), next() и nextAll() без успеха.

Answer 1

$('.red').on('click', function(e){ 
    $(this).nextAll('.blue').first().toggle(); 
}); 

Более надежный solution-- будет смотреть мимо щелкнули .red элемента и получить все .blue elements-- то просто выскакивает выключить первый (ближайший) элемент найден и переключает его.

Answer 2

Вы можете использовать .next() x2:

$('.red').on('click', function(){ 
    $(this).next().next('.blue').toggle(); 
}); 

jsFiddle example

$(this) ссылается на элемент, который вы кликнули, где $('.red') выбирает все элементы с классом красного.

Answer 3

Когда вы находитесь внутри обработчика событий, вы должны обратиться к переменной this, чтобы получить доступ к элементу dom, который вызвал событие.

С другой стороны, next() возвращает родственного брата, следующего сразу после текущего, поэтому вы должны использовать nextAll('selector'), чтобы получить все сиблинги, соответствующие селектору. В вашем случае вам нужно только первое совпадение, поэтому вы должны фильтровать результаты с помощью eq(0), чтобы получить первый соответствующий элемент.

Итак, наконец, ваш код должен выглядеть следующим образом:

$('.red').on('click', function(){ $(this).nextAll('.blue').eq(0).toggle(); });

Answer 4

Вы можете цепи next() дважды:

$(this).next().next().toggle(); 

Рабочий Пример:

$(document).ready(function(){ 
 

 
$('.red').click(function(){$(this).next().next().toggle();}); 
 

 
});

div { 
 
display: inline-block; 
 
width: 40px; 
 
height: 40px; 
 
} 
 

 
.red { 
 
background: rgb(255,0,0); 
 
} 
 

 
.green { 
 
background: rgb(0,127,0); 
 
} 
 

 
.blue { 
 
background: rgb(0,0,255); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="red"></div> 
 
<div class="green"></div> 
 
<div class="blue"></div> 
 

 
<div class="red"></div> 
 
<div class="green"></div> 
 
<div class="blue"></div> 
 

 
<div class="red"></div> 
 
<div class="green"></div> 
 
<div class="blue"></div> 
 

 
<div class="red"></div> 
 
<div class="green"></div> 
 
<div class="blue"></div>

---

Javascript эквивалент JQuery:

var reds = document.querySelectorAll('.red'); 
 

 
function toggleNextBlue() { 
 
this.nextSibling.nextSibling.classList.toggle('hidden'); 
 
} 
 

 
for (var i = 0; i < reds.length; i++) { 
 
    var red = reds[i]; 
 
    red.addEventListener('click',toggleNextBlue,false); 
 
}

div { 
 
display: inline-block; 
 
width: 40px; 
 
height: 40px; 
 
} 
 

 
.red { 
 
background: rgb(255,0,0); 
 
} 
 

 
.green { 
 
background: rgb(0,127,0); 
 
} 
 

 
.blue { 
 
background: rgb(0,0,255); 
 
} 
 

 
.hidden { 
 
display: none; 
 
}

<div class="red"></div> 
 
<div class="green"></div> 
 
<div class="blue"></div> 
 

 
<div class="red"></div> 
 
<div class="green"></div> 
 
<div class="blue"></div> 
 

 
<div class="red"></div> 
 
<div class="green"></div> 
 
<div class="blue"></div> 
 

 
<div class="red"></div> 
 
<div class="green"></div> 
 
<div class="blue"></div>