如何使用jQuery從foreach獲取div？

Question

我想爲每個過濾器創建一個顯示更多/更少的功能，默認情況下隱藏它們的相關選項，只顯示被點擊的選項。

問題是，當我點擊任何「顯示更多」按鈕時，每個過濾器的選項都顯示出來，而不是當前被點擊的，反之亦然。

我通過foreach循環顯示過濾器和它們的選項，我不知道如何用jQuery獲得一個窗簾。

我想這是通過循環應該有一個唯一的標識符我所用ID =「{{$過濾器 - > ID}}」試圖創建的所有div

感謝您對您的所有幫幫我！

@foreach($filters as $filter) 

<h4>{{ $filter->title }}</h4> 
<a class="readmorebtn">Show options</a><br> 

    <div class="options" id ="{{ $filter->id }}"> 

    @foreach($filter->filteroptions as $option) 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" name="filteroptions[]" value="{{ $option->id }}" /> 
       {{ $option->title }} 
      </label> 
     </div> 
    @endforeach 
</div> 

@endforeach 

這是jQuery的部分：

var moreText = "Show options", 
    lessText = "Hide options", 
    moreButton = $(".readmorebtn"); 


$(".options").hide(); 

moreButton.click(function() { 

    $this = $(this); 

    if($('div.options:hidden')) { 
     showDiv(); 
    } 

    $this.text($this.text() == moreText ? lessText : moreText); 
}); 


function showDiv() { 

    $('div.options').slideToggle("fast"); 

} 

Answer 1

的問題與您的代碼是您訪問所有的divs和切換他們時，被點擊more按鈕。

應該如何：

• 傳遞當前對象並獲取當前div.options，然後執行該操作切換的效果。

JS代碼：

var moreText = "Show options", 
lessText = "Hide options", 
moreButton = $(".readmorebtn"); 

$(".options").hide(); 

moreButton.click(function() { 
    $this = $(this); 

    // if current div is hidden, then toggle it 
    if($this.find('div.options:hidden')) { 
    showDiv($this); 
    } 

    $this.text($this.text() == moreText ? lessText : moreText); 
}); 


function showDiv($currentDiv) { 
$currentDiv.find('div.options').slideToggle("fast"); 
}