Question

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

我有2个按钮用于添加项目，1个用于从购物车中删除项目。现在我想要删除项目的按钮，只有在点击添加项目的按钮后才会显示。

以下是按钮的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

我希望这就是你的意思。

尝试：

<强> 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/

Answer 2

当您使用onclick="someFunction();"时，请不要使用$('.add-product').click(function() {});。最佳实践是仅对click事件使用一种方法。如果对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

Onclick显示该标题的按钮

2 个答案: