Question

我想在点击li.bc-cate-has-child.first时显示元素a.bc-pagination-next，并在点击a.bc-pagination-next时隐藏它。

下面的脚本有效，但点击将显示/隐藏两个容器中的所有匹配元素，如何保持点击只影响父容器中的元素？

脚本：

$(document).ready(function () {
    $('.bc-list-wrap').each(function () {
        $("a.bc-pagination-next").click(function () {
            $("li.bc-cate-has-child.first").hide();
        })

        $("a.bc-pagination-prev").click(function () {
            $("li.bc-cate-has-child.first").show();
        })
    });
});

HTML：

<div class="bc-list-wrap">
    <ul class="bc-list bc-ul bc-list-not-standard">
        <li class="bc-cate-has-child first" style="display: none;">
        </li>
    </ul>
    <div class="bc-pagination">
        <a class="bc-pagination-next">next</a>
        <a class="bc-pagination-prev">prev</a>
    </div>
</div>

<div class="bc-list-wrap">
    <ul class="bc-list bc-ul bc-list-not-standard">
        <li class="bc-cate-has-child first" style="display: none;">
        </li>
    </ul>
    <div class="bc-pagination">
        <a class="bc-pagination-next">next</a>
        <a class="bc-pagination-prev">prev</a>
    </div>
</div>

Answer 1

您需要使用当前元素上下文，即this并遍历DOM以定位所需元素，然后对其执行所需操作。

您可以使用.closest()追溯到共同的祖先，之后.find()可用于定位元素。

$(document).ready(function () {
    $('.bc-list-wrap').on("click", "a.bc-pagination-next", function () {
        $(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").hide();
    })

    $('.bc-list-wrap').on("click", "a.bc-pagination-prev", function () {
        $(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").show();
    })
});

Answer 2

你可以做到

$(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").hide();

和

$(this).closest('.bc-list-wrap').find("li.bc-cate-has-child.first").show()

参考closest

Answer 3

$(document).ready(function () {
    $('.bc-list-wrap').each(function () {
        $('a.bc-pagination-next').click(function () {
            $(this).parents('.bc-list-wrap').find('li.bc-cate-has-child.first').hide();
        })

        $('a.bc-pagination-prev').click(function () {
            $(this).parents('.bc-list-wrap').find('li.bc-cate-has-child.first').show();
        })
});

仅点击父容器中的元素

3 个答案: