Jquery переключает все divs вместо одного

У меня есть куча div, которую я собираюсь переключить на клик. Тем не менее, я не хочу иметь кучу различных функций jquery для выполнения того же самого. Проблема в том, что моя текущая функция переключит все div, а не только выбранную. Любые решения для переключения только тех, которые были выбраны без наличия функции jquery?

JSFIDDLE

HTML:

<div>
 <div>
  Hello
 </div>
 <div hidden>
 Hello Hello Hello
 </div>
</div>
<div>
 <div>
  Hello
 </div>
 <div hidden>
 Hello Hello Hello
 </div>
</div>

CSS:

.help-info {
 background: #f1f1f1;
 width: 650px;
 margin: 0 auto;
 padding: 15px 20px;
 font-family: 'Open Sans', serif;
}
.help-info-open {
 background: #1795db;
 width: 650px;
 margin: 0 auto;
 padding: 15px 20px;
 font-family: 'Open Sans', serif;
}
.help-info-link {
 color: #5c5c5c;
}
.help-info-link-open {
 color: #ffffff;
}
.help-info-text {
 background: #fff;
 font-family: 'Open Sans', serif;
 color: #5c5c5c;
 width: 650px;
 margin: 0 auto;
 padding: 15px 20px;
 box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
 -o-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}

Jquery:

$(".help-info-link").click(function(event){
 event.preventDefault();
 $('.help-info').toggleClass('help-info-open');
 $('.help-info-link').toggleClass('help-info-link-open');
 $('.help-info-text').toggle();
});
2 ответа

Внутри обработчика событий это относится к элементу с щелчком. Таким образом, вы можете сделать что-то вроде этого:

$(".help-info-link").click(function(event){
 event.preventDefault();
 $(this).closest('.help-info').toggleClass('help-info-open');
 $(this).toggleClass('help-info-link-open');
 $(this).closest('.help-info').next('.help-info-text').toggle();
});

См. Здесь: http://jsfiddle.net/4q6b0gn4/


Вместо ближайшего вы можете использовать прямую родительскую функцию и следующую функцию, как я сделал здесь: http://jsfiddle.net/uq6xcdo5/1/

$(".help-info-link").click(function(event){
 event.preventDefault();
 $(this).parent().toggleClass('help-info-open');
 $(this).toggleClass('help-info-link-open');
 $(this).parent().next(".help-info-text").toggle();
});

licensed under cc by-sa 3.0 with attribution.