toggleClass выбрать в петле JQuery

Question

У меня есть цикл:

$(document).ready(function(){ 
    $(".viewonclick").click(function(){ 
     $(this).closest('.viewonclick').next(".hideonclick").slideToggle();  
     $(".plus").toggleClass("hideplus"); 
    }); 
}); 

.viewonclick i{ 
    position : absolute; 
    right: 220px; 
    display: inline; 
} 
.viewonclick .hideplus{ 
    display: none; 
} 

@foreach($customcat as $c) 
<div> 
    <div class="viewonclick"><h4>{{ $c->Custom->name }} 
    <i class="plus icon"></i> 
    <i class="minus icon"></i> 
    </h4></div> 
    <ul class="hideonclick"> 
     @foreach($customvalue as $v) 
     <li> 
      @if($v->custom_id == $c->custom_id) 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
      {{ $v->value }} 
      </a> 
      @endif 
     </li> 
     @endforeach 
    </ul> 
</div> 
@endforeach 

Когда цикл работы все элементы, имеющие класс plus изменены, чтобы иметь hideplus вместо этого. Мне нужен только элемент с щелчком, чтобы взять этот класс. Я попробовал метод .next() и .closest(). Он работал с .slideToggle(), но не с .toggleClass().

Answer 1

Это потому, что у вас есть эта строка:

$(".plus").toggleClass("hideplus"); 

и эта строка кода действует на всех «.plus» элементов.

Изменить это:

$(this).find(".plus").toggleClass("hideplus"); 

Пример:

$(function() { 
 
    $('.plus.icon').toggleClass("hideplus"); 
 
    $(".viewonclick").click(function(){ 
 
    $(this).next(".hideonclick").slideToggle(); 
 
    $(this).find("i").toggleClass("hideplus"); 
 
    }); 
 
});

.viewonclick i{ 
 
    position : absolute; 
 
    right: 220px; 
 
    display: inline; 
 
} 
 
.viewonclick .hideplus{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div> 
 
    <div class="viewonclick"><h4>name1 
 
     <i class="plus icon">+</i>&nbsp; 
 
     <i class="minus icon">-</i> 
 
    </h4></div> 
 
    <ul class="hideonclick"> 
 
     <li> 
 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
 
       value1 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
 
       value1 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
 
       value1 
 
      </a> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<div> 
 
    <div class="viewonclick"><h4>name2 
 
     <i class="plus icon">+</i>&nbsp; 
 
     <i class="minus icon">-</i> 
 
    </h4></div> 
 
    <ul class="hideonclick"> 
 
     <li> 
 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
 
       value1 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
 
       value1 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
 
       value1 
 
      </a> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<div> 
 
    <div class="viewonclick"><h4>name3 
 
     <i class="plus icon">+</i>&nbsp; 
 
     <i class="minus icon">-</i> 
 
    </h4></div> 
 
    <ul class="hideonclick"> 
 
     <li> 
 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
 
       value1 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
 
       value1 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}"> 
 
       value1 
 
      </a> 
 
     </li> 
 
    </ul> 
 
</div>