Как только переключить изображение для дочернего элемента?

Question

У меня есть переключатель с плюсом/минусом, используя jquery, но когда я нажимаю на ul, каждое изображение плюс/минус меняется одновременно. Мне нужно только изменить изображение для ul, на которое было нажато.

JQuery:

$("#xmlDiv").on("click", "ul", function(e) { 
    $(this).find(".mainlist").slideToggle('slow', function() { 
     if($('span.minus img').attr('src') == 'images/plus.png') 
      $('span.minus img').attr('src', "images/minus.png"); 
     else 
      $('span.minus img').attr('src', "images/plus.png"); 
    }); 
}); 

HTML:

<div id="xmlDiv"> 
    <ul class="section"> 
     <li class="root"><span class="minus"><img src="images/minus.png"></span> Antivirus Compliance 
      <ul class="mainlist" style="margin-left: -25px; display: block;"> 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not installed.">Not Installed</span> 
       </li> 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not running.">Not Running</span> 
       </li> 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not updated.">Not Updated</span> 
       </li> 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Non Compliant</span> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <ul class="section"> 
     <li class="root"><span class="minus"><img src="images/minus.png"></span> Classification 
      <ul class="mainlist" style="margin-left:-25px;"> 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Classification</span> 
       </li> 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">DHCP</span> 
       </li> 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">p0f</span> 
       </li> 
      </ul> 
     </li> 
    </ul> 

Любая помощь будет принята с благодарностью. Благодаря!

Answer 1

Вы выбираете span.minus img для всех ul элементов. Что вам нужно сделать, это использовать $(this), чтобы захватить только пролеты по отношению к щелкнули ul

$("#xmlDiv").on("click", "ul", function(e) { 
 
    var clickedUl = $(this);          // reference to the clicked ul element 
 
    clickedUl.find(".mainlist").slideToggle('slow', function() { // toggle the .mainlist class element within the clicked ul element 
 
     clickedUl.find('span.minus img');       // find the img within the clicked ul 
 
     if(img.attr('src') === 'images/plus.png') 
 
      img.attr('src', "images/minus.png"); 
 
     else 
 
      img.attr('src', "images/plus.png"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="xmlDiv"> 
 
    <ul class="section"> 
 
     <li class="root"><span class="minus"><img src="images/minus.png"></span> Antivirus Compliance 
 
      <ul class="mainlist" style="margin-left: -25px; display: block;"> 
 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not installed.">Not Installed</span> 
 
       </li> 
 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not running.">Not Running</span> 
 
       </li> 
 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="Antivirus is not updated.">Not Updated</span> 
 
       </li> 
 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Non Compliant</span> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
    <ul class="section"> 
 
     <li class="root"><span class="minus"><img src="images/minus.png"></span> Classification 
 
      <ul class="mainlist" style="margin-left:-25px;"> 
 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">Classification</span> 
 
       </li> 
 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">DHCP</span> 
 
       </li> 
 
       <li class="desc"> <span style="color:#e4e4e4;">-</span> <span class="desc_span" tooltip="">p0f</span> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul>

Answer 2

Вы можете использовать this первого ul

$("#xmlDiv").on("click", "ul", function(e) { 
    var firstThis=$(this); 
    $(this).find(".mainlist").slideToggle('slow', function() { 

     if(firstThis.find('span.minus img').attr('src') == 'images/plus.png') 
      firstThis.find('span.minus img').attr('src', "images/minus.png"); 
     else 
      firstThis.find('span.minus img').attr('src', "images/plus.png"); 
    }); 
}); 

http://jsfiddle.net/lTasty/9pohn7e0/