单击该标题的显示按钮

Question

更新I希望在项目被删除时隐藏删除项按钮.

我有两个按钮，一个添加一个项目和一个删除一个项目从购物车。现在，我想让按钮删除该项目，只有在单击要添加项目的按钮后才会出现。

下面是按钮的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();

但是Remove Item按钮没有隐藏..。

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() {});。只对单击事件使用一种方法是最佳实践。如果对click事件使用这两种方法，则两者都将调用。

对于你的问题，试试这个

    <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

Answer 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>

Javascript:

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

jsfiddle:

https://jsfiddle.net/Lxo32trc/3/