Question

此代码适用于所有人，但不适用于按下按钮的特定元素。

HTML：

<div id="ProductsIndex">
    <div class="product">
        <div class="product-detail"></div>
        <div class="prod-box"></div>
        <a class="btn-detail" href=""> <i class="fa fa-times"></i> </a>
    </div>

</div>

jQuery的：

$('#ProductsIndex .product .btn-detail').click(function(e) {
    e.preventDefault();
    $('#ProductsIndex .product .prod-box').hide('slow');
    $('#ProductsIndex .product .product-detail').show('slow');

    $('#ProductsIndex .product .product-detail .fa-times').click(function(e) {
        $('#ProductsIndex .product  .product-detail').hide('slow');
        $('#ProductsIndex .product .prod-box').show('slow');
    });
});

这适用于所有元素，但是当我按下按钮时我需要特定的元素。

Answer 1

您不应该在事件处理程序中绑定事件。

使用

$('.product .btn-detail').click(function(e) {
    e.preventDefault();
    var parent = $(this).closest(".product");
    parent.find(".prod-box'").hide('slow');
    parent.find(".product-detail").show('slow');
});

$('.product .fa-times').click(function(e) {
    var parent = $(this).closest(".product");
    parent.find(".prod-box'").show('slow');
    parent.find(".product-detail").hide('slow');
});

Answer 2

首先，不要将一个点击处理程序的附件嵌套在另一个中，否则每次外部处理程序触发时都会重复进行内部附件。

其次，您可以利用jQuery的.closest()和.find()来遍历DOM，将点击的节点作为初始参考点。

$('#ProductsIndex .product .btn-detail').on('click', function (e) {
    e.preventDefault();
    $(this).closest("#ProductsIndex")
        .find(".prod-box").hide('slow').end()
        .find(".product-detail").show('slow');

});
$('#ProductsIndex .product .product-detail .fa-times').on('click', function (e) {
    $(this).closest("#ProductsIndex")
        .find(".product-detail").hide('slow').end()
        .find(".prod-box").show('slow');
});

注意：明智地使用.end()可以避免不必要的任务。

单击按钮并隐藏元素“兄弟”并显示另一个

2 个答案: