循环 jquery 中的 toggleClass select

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

当循环工作时，所有具有 class plus 的元素都更改为具有 hideplus。我只需要点击的元素就可以拿这个class。我尝试了 .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>

循环 jquery 中的 toggleClass select

toggleClass select in loop jquery

javascript

jquery

toggleclass