javascript - JQuery 切换仅单击上一个跨度显示

Question

尝试仅显示每个 .filter 之前的 .active-box 范围。我尝试过使用 .prev、.closest、.siblings 和其他一些方法，但似乎没有任何效果。根据我使用的内容，它要么切换全部，要么不切换，似乎无法挑出 .active-box。我了解一些基本的 JQuery，但我对此感到困惑并且没有想法。我做错了什么？

我还尝试了 <li> 内的跨度的每种方法。标签。

.empty-box 显示一个空框，.active-box 在单击时用较小的方 block 填充空框。

HTML:

                <div class="filter-dropdown">
                    <ul>
                        <span class="empty-box"><span class="active-box"></span></span><li class="filter" class="active" data-filter="all" data-dimension="season">All</li>
                        <span class="empty-box"><span class="active-box" style="display: none;"></span></span><li class="filter" data-filter="winter" data-dimension="season">Winter</li>
                        <span class="empty-box"><span class="active-box" style="display: none;"></span></span><li class="filter" data-filter="fall" data-dimension="season">Fall</li>
                        <span class="empty-box"><span class="active-box" style="display: none;"></span></span><li class="filter" data-filter="summer" data-dimension="season">Summer</li>
                        <span class="empty-box"><span class="active-box" style="display: none;"></span></span><li class="filter" data-filter="spring" data-dimension="season">Spring</li>
                    </ul>
                </div>

JQuery:

    $('.filter').click(function() {
        $('span').closest('.active-box').toggle();});

Answer 1

您需要:

$('.filter').click(function() {
    $(this).prev('.empty-box').find('.active-box').toggle();
});