toggleClass在循环中选择jquery

Question

I have a loop:

$(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

When the loop works all elements having the class plus are changed to have hideplus instead. I only need the clicked element to take this class. I tried the .next() and .closest() method. It worked with .slideToggle() but not with .toggleClass() .

Answer 1

This because you have this line:

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

and this line of code acts on all ".plus" elements.

Change this to:

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

An example:

 $(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>