Класс JQuery против ID

Question

У меня здесь есть петля foreach. Для каждого объекта, который он печатает, есть раздел комментариев, который можно развернуть/скомпоновать.

Проблема у меня есть, когда я нажимаю «Развернуть все» для элемента, он разворачивает комментарии для КАЖДОГО элемента в цикле все сразу. Принимая во внимание, что я хочу видеть комментарии только для этого конкретного элемента.

Я знаю, что это как-то связано с идентификаторами и классами, но у меня нет опыта работы с JQuery. Так что, пожалуйста, помогите!

<?php 
foreach ($items as $item) { 

    echo item['comment'];         
    echo $item['full_name']; ?> 

<div id="listContainer"> 
      <div class="listControl"> 
       <a class="expandList">Expand All</a> 
       <a class="collapseList">Collapse All</a> 
      </div> 
      <ul class="expList"> 
       <li>Item A 
        <ul> 
         <li>Item A.1 
          <ul> 
           <li><span>fidjis</span></li> 
          </ul> 
         </li> 
         <li>Item A.2</li> 
         <li>Item A.3 
          <ul> 
           <li><span>iejowejfiojwiefj.</span></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li>Item B</li> 
       <li>Item C 
        <ul> 
         <li>Item C.1</li> 
         <li>Item C.2 
          <ul> 
           <li><span>sdfkjksdjfnjkdsfnjn</span></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
<?php 

     } 
     ?> 

и вот Jquery:

function prepareList() { 
    $('.expList').find('li:has(ul)') 
    .click(function(event) { 
     if (this == event.target) { 
      $(this).toggleClass('expanded'); 
      $(this).children('ul').toggle('medium'); 
     } 
     return false; 
    }) 
    .addClass('collapsed') 
    .children('ul').hide(); 

    //Create the button functionality 
    $('.expandList') 
    .unbind('click') 
    .click(function() { 
     $('.collapsed').addClass('expanded'); 
     $('.collapsed').children().show('medium'); 
    }) 
    $('.collapseList') 
    .unbind('click') 
    .click(function() { 
     $('.collapsed').removeClass('expanded'); 
     $('.collapsed').children().hide('medium'); 
    }) 

}; 

Answer 1

Вы создаете DIV с идентификатором "listContainer" на каждой итерации цикла вашей, это является недопустимым. Идентификатор должен использоваться только один раз. Предлагает изменить Id = "listContainer" на class = "listContainer"

Для jQuery проблема заключается в том, что вы ссылаетесь на все элементы с классом «свернутый», а не только с теми, которые находятся внутри контейнера связанные с кнопкой «Развернуть все».

Я не проверял это, но вы хотите что-то вдоль этих линий

//Create the button functionality 
$('.expandList') 
.unbind('click') 
.click(function() { 
    $(this).parents('.listContainer').find('.collapsed').addClass('expanded'); 
    $(this).parents('.listContainer').find('.collapsed').children().show('medium'); 
}) 
$('.collapseList') 
.unbind('click') 
.click(function() { 
    $(this).parents('.listContainer').find('.collapsed').removeClass('expanded'); 
    $(this).parents('.listContainer').find('.collapsed').children().hide('medium'); 
}) 

Разница здесь в том, что вы начинаете с кнопку нажал и DIV с классом в «listContainer», затем двигайтесь вниз от чтобы найти все элементы «.collapsed».

Answer 2

Я думаю, что вы используете классы для идентификации. Идентификаторы используются для идентификации отдельных элементов, тогда как класс может применяться к более чем одному элементу. Попытайтесь использовать идентификаторы в ваших вызовах jQuery при доступе к отдельному элементу. Вы можете попробовать что-то вроде:

?> 
<div id="listContainer"> 
     <div class="listControl"> 
      <a class="expandList">Expand All</a> 
      <a class="collapseList">Collapse All</a> 
     </div> 
     <ul id="list1" class="expList"> 
      <li> 
       Item A 
       <ul> 
        <li> 
         Item A.1 
         <ul> 
          <li> 
           <span>fidjisjfisdjfisdjifjsidfj.</span> 
          </li> 
         </ul> 
        </li> 
        <li> 
         Item A.2 
        </li> 
        <li> 
         Item A.3 
         <ul> 
          <li> 
           <span>iejowejfiojwiefj.</span> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li> 
       Item B 
      </li> 
      <li> 
       Item C 
       <ul> 
        <li> 
         Item C.1 
        </li> 
        <li> 
         Item C.2 
         <ul> 
          <li> 
           <span> sdfkjksdjfnjkdsfnjn. </span> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
<?php 

    } 
    ?> 

и ваш Jquery будет что-то вроде

function prepareList() { 
$('#list1').find('li:has(ul)') 
.click(function(event) { 
    if (this == event.target) { 
     $(this).toggleClass('expanded'); 
     $(this).children('ul').toggle('medium'); 
    } 
    return false; 
}) 
.addClass('collapsed') 
.children('ul').hide(); 

//Create the button functionality 
$('.expandList') 
.unbind('click') 
.click(function() { 
    $('.collapsed').addClass('expanded'); 
    $('.collapsed').children().show('medium'); 
}) 
$('.collapseList') 
.unbind('click') 
.click(function() { 
    $('.collapsed').removeClass('expanded'); 
    $('.collapsed').children().hide('medium'); 
}) 

};

Answer 3

Сначала вы должны изменить listContainer на атрибут класса.

ID должен быть уникальным.

function prepareList() { 
    $('.expList').find('li:has(ul)') 
     .click(function(event) { 
      if (this == event.target) { 
       $(this).toggleClass('expanded'); 
       $(this).children('ul').toggle('medium'); 
      } 
      return false; 
     }) 
     .addClass('collapsed') 
     .children('ul').hide(); 

    //Create the button functionality 
    $('.expandList') 
     .unbind('click') 
     .click(function() { 
      // walk up the tree from the clicked button 
      // and find the parent .listContainer 
      var $list = $(this).parents(".listContainer"); 
      // find .collapsed in .listContainer 
      $list.find('.collapsed').addClass('expanded'); 
      $list.find('.collapsed').children().show('medium'); 
     }); 

    $('.collapseList') 
     .unbind('click') 
     .click(function() { 
      // walk up the tree from the clicked button 
      // and find the parent .listContainer 
      var $list = $(this).parents(".listContainer"); 
      // find .collapsed in .listContainer 
      $list.find('.collapsed').removeClass('expanded'); 
      $list.find('.collapsed').children().hide('medium'); 
     }); 
};