toggleClass在循环中选择jquery

Mohamed Mehanny 发表于 Dev

穆罕默德·梅汉尼（Mohamed Mehanny）

我有一个循环：

$(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。我只需要clicked元素来上这堂课。我尝试了.next()和.closest()方法。它与配合使用，.slideToggle()但没有配合.toggleClass()。

盖塔诺

这是因为您有以下行：

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