javascript - Onclick 显示该标题的按钮

Question

更新我希望在删除项目后隐藏删除项目按钮...

我有 2 个按钮，一个用于添加商品，一个用于从购物车中删除商品。现在我希望删除项目的按钮仅在单击添加项目的按钮后才显示。

以下是按钮的 HTML:

<button class='add-product' onclick="showDel($(this))" data-product='<?php the_title();?>'>Add Product</button>

<button class="delete-product" onclick="hideDel($(this))" data-product="<?php the_title();?>" style='display:none;'>Remove Product</button>

我现在使用的代码:

    function showDel($this) {
    var dataProduct = $this.attr("data-product");
    $(".delete-product[data-product='" + dataProduct + "']").show();
}
function hideDel($this) {
    $this.hide();

但是删除项目按钮不会隐藏...

HTML 结构:

<button class='add-product' onclick="showDel($(this))" data-product='Boot X'>Add Product</button>
<button class="delete-product" data-product="Boot X" style='display:none;'>Remove Product</button>

Answer 1

当您使用 onclick="someFunction();" 时，请勿使用 $('.add-product').click(function() {});。最佳实践是仅对单击事件使用一种方法。如果您对点击事件使用这两种方法，那么这两种方法都会被调用。

对于你的问题，试试这个

    <button class="cartBtn add-product" data-product="1">Add Product</button> 
<button class="cartBtn delete-product hide" data-product="1">Remove Product</button>
<br>
<button class="cartBtn add-product" data-product="2">Add Product</button> 
<button class="cartBtn delete-product hide" data-product="2">Remove Product</button>
<br>
<button class="cartBtn add-product" data-product="3">Add Product</button> 
<button class="cartBtn delete-product hide" data-product="3">Remove Product</button>

JS

$('.cartBtn').click(function() {
alert('re');
    var dataProduct = $(this).data("product");

    $('button.add-product[data-product="' + dataProduct + '"]').toggleClass('hide');
        $('button.delete-product[data-product="' + dataProduct + '"]').toggleClass('hide');

});

jsFiddel