jQuery переключается на несколько div с тем же классом

Question

Я пытаюсь запустить jQuery на моем сайте.

Пока мой код:

<script> 
$(document).ready(function(){ 
    $(".flip").click(function(){ 
    $(".flippanel").toggle(); 
    }); 
}); 
</script> 

Я тогда в HTML есть:

<p class="flip">Flip it!</p> 
<p class="flippanel">This is a paragraph with little content.</p> 
<p class="flippanel">This is another small paragraph.</p> 
<p class="flip 2">Flip it!</p> 
<p class="flippanel 2 ">This is a paragraph with little content.</p> 
<p class="flippanel 2">This is another small paragraph.</p> 

Как я могу идти о том, что для переключения двух панелей независимо друг от друга? Прямо сейчас, каждая панель переключается в одно и то же время.

Answer 1

Выберите следующие два p .flippanel того, который вы нажимаете каждый раз.

nextAll выбрать все следующие братья и сестры

slice(0, 2) сужает к первому два

Try:

$(".flip").click(function(){ 
    $(this).nextAll(".flippanel").slice(0, 2).toggle(); 
    }); 

DEMO

Answer 2

Так это выглядит, как вы хотите детали класса flippanel к скрыть себя, когда вы нажимаете «перевернуть»? Затем я рекомендовал бы вместо этого поместить их внутрь div, чтобы при щелчке по нему весь div обрушился.

Таким образом, вы можете сделать что-то вроде:

$(".flip").click(function(){ 
    $(this).children().toggle(); 
}); 

Если вы думаете, что это код для вас, но не нравится, что все внутри из DIV кликабельна, вы можете добавить следующий код Кроме того, если вы считаете, что это решение для вас, вы можете добавить следующий код, который сделает его таким, что только «Flip it!» часть кликабельна. Я обновил свою скрипку ниже, чтобы включить этот код.

$(".flippanel").click(function(event) { 
    event.stopPropagation(); 
}); 

I've made a JSFiddle for you if you click this line to look.

Answer 3

$(".flip").click(function(){ 
     $(this).next().toggle(); 
     $(this).next().next().toggle(); 
}); 

будет работать.

http://jsfiddle.net/xyqwmzhj/2/

но вы действительно должны рассмотреть переписывать HTML, использовать одни и те же классы для содержания и происходит с детьми или что-то подобное.

[править] если вы хотите, чтобы начать закрытое, добавьте

style="display: none;" 

в DIV, которые должны быть скрыты.

полный HTML:

<p class="flip" style="cursor: pointer;">Flip it!</p> 
<div style="display: none;"> 
<p class="flippanel">This is a paragraph with little content.</p> 
<p class="flippanel">This is another small paragraph.</p> 
</div> 
<p class="flip" style="cursor: pointer;">Flip it!</p> 
<div style="display: none;"> 
<p class="flippanel">This is a paragraph with little content.</p> 
<p class="flippanel">This is another small paragraph.</p> 
</div> 

Answer 4

Числа являются недопустимыми в качестве HTML класса.

Попробуйте так:

<p class="flip flip_1">Flip it!</p> 
<p class="flippanel flippanel_1">This is a paragraph with little content.</p> 
<p class="flippanel flippanel_1">This is another small paragraph.</p> 
<p class="flip flip_2">Flip it!</p> 
<p class="flippanel flippanel_2 ">This is a paragraph with little content.</p> 
<p class="flippanel flippanel_2">This is another small paragraph.</p> 

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

<script> 
$(document).ready(function(){ 
    $(".flip").click(function(){ 
    $(".flippanel_1").toggle(); 
    }); 
}); 
</script> 

Answer 5

Что вам нужно использовать .nextUntil(). Он получит каждый следующий элемент, пока вы не нажмете переданный селектор.

$(".flip").click(function(){ 
    $(this).nextUntil('.flip').toggle(); 
}); 

Обратите внимание, что переданный селектор исключен из объекта.