如何用jQuery从foreach中获取div？

Question

我想为每个过滤器创建一个显示多/少功能，默认情况下隐藏它们的相关选项，并且只显示已单击的选项。

问题是，当我单击任何“显示更多”按钮时，每个过滤器的选项都会显示出来，而不是被单击的当前选项，反之亦然。

我正在展示过滤器和他们的选择，通过循环通过与foreach，我不知道如何与jQuery一个窗帘。

我想通过循环创建的所有div都应该有一个唯一的标识符，我尝试了id =“{ $filter->id }”。

谢谢你的帮助！

@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");
}