Правильный переход к элементам в одном блоке

Буду признателен за помощь в jQuery. Здесь все работает просто отлично: jsfiddle - это работает нормально

Но здесь, с ДВУМЯ идентичными блоками HTML на одной странице, они конфликтуют (они мешают друг другу, когда вы нажимаете «показать» во втором блоке, это влияет на 1-й блок): jsfiddle - проблема

Есть ли способ изменить JS (правильно использовать .closest(), .find(), другие методы обхода), чтобы я мог иметь столько блоков на одной странице, сколько необходимо, и все они работали независимо? (без выдумывания новых идентификаторов и размножения JS-кода).

Я могу легко перемещаться по <li>, но возможно ли это с DIV?

EDIT: (У меня нет репутации ни в чем, поэтому использую edit: Большое спасибо за помощь и дополнительное уточнение идентификаторов. Все работает отлично.

Всего наилучшего)


jquery dom traversal
person Andrejs    schedule 19.10.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

У вас есть дублирование идентификаторов (превратите их в имена классов .funFactAnswer), и ваш селектор является общим, сделайте его более конкретным для цели.

 $(document).ready(function () {
      $(".showfunFactAnswer").click(function () {
         var $this = $(this);
         $this.closest('.funFactWrap').find('.funFactAnswer').slideDown()
         $this.next().removeClass("hide");
     });
     $(".hideButtonAnswer").click(function () {
         $(this).addClass("hide").closest('.funFactWrap').find('.funFactAnswer').slideUp()
     });

 });

Скрипка

С повторяющимися идентификаторами селекторы идентификаторов будут выбирать только первый экземпляр элемента с тем же идентификатором.

person PSL    schedule 19.10.2013