JQuery селектор для разных экземпляров одного и того же класса

Question

Я не знаю, подходит ли все название ...... но вот моя ситуация .... у меня есть класс с именем dropper и другой класс drop_list ... эти два являются подклассамикласс drop_head, drop_list должен выпадать при каждом нажатии на пипетку ...

---

           <div class="drop_head">
              <div class="dropper"> Content-1</divr>
              <div class="drop_list"> List-1</div>
           </div>
           <div class="drop_head">
              <div class="dropper"> Content-2</divr>
              <div class="drop_list"> List-2</div>
           </div>

---

при нажатии на content-1 list-1 должен переключаться, а когда content-2 -щелкнул list-2 должен выпасть вниз ... как мне добиться этого с помощью одного jquery .. ??заранее спасибо ......

Answer 1

Если я правильно вас понимаю, это должно быть довольно просто:

$('.drop_head').each(function(i,e){
   $('.dropper', e).click(function(){
      $('.drop_list', e).slideToggle();
   });
});

, используя .drop_head в качестве контекста для списка и интерактивного элемента, вам не нужно использовать идентификаторы. Кроме того, если вы случайно пропустите список или пипетку, это только испортит этот один «виджет» и не повлияет на остальные, что не было бы в случае с closest.

Answer 2

у тебя два пути (что я вижу =))
-просто дайте два разных имени в раскрывающемся списке ваших пар / dopper

<div class="dropper" id="id_1"> Content-1</divr> 
          <div class="drop_list" id="id_1"> List-1</div>  
<div class="dropper" id="id_2"> Content-2</divr> 
          <div class="drop_list" id="id_2"> List-2</div>

и затем произнесите что-то вроде:

$(".dropper #id_1").click(function(){$("#id_1").slideToggle("slow")})

или короче:

$(".dropper").click(function(){$(this).closest('drop_list').slideToggle()})

Надеюсь, это поможет
Лука