JQuery切换时只点击上一个跨度显示

Question

Trying to display only the .active-box span previous to each .filter. I've tried using .prev, .closest, .siblings, and a couple other methods but I can't seem to get anything to work. Depending on what I use it will either toggle all or none, can't seem to single out the .active-box. I know some basic JQuery but I'm stumped on this and running out of ideas. What am I doing wrong?

I've also tried each method with the spans inside the <li> tag.

.empty-box displays an empty box and .active-box fills the empty box with a smaller square on click.

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

You need:

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