Javascript 单击该标题的“显示”按钮

更新 我想有删除项目按钮被隐藏时，项目已被删除

我有两个按钮，一个用于添加项目，另一个用于从购物车中删除项目。 现在我想让删除项目的按钮只在单击添加项目的按钮后显示

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

但是

删除项目

按钮不会隐藏

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>

添加产品
除去产品

我希望这就是你的意思

尝试：

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();
}

jsfiddle:

<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='<?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();
}

jsfiddle:

<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();
}

---

当您使用

onclick=“someFunction（）；”

时，请不要使用

$（'.add product'）。单击（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>

}))

当您使用
onclick=“someFunction（）；”
时，请不要使用
$（'.add product'）。单击（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>

}))

所有这些都是最重要的。这会同时显示所有按钮，有多个按钮
class=“add product”
，这就是为什么我认为应该使用唯一的数据产品来完成@RAD11不可能，请显示有问题的响应HTML结构。寻找JSFIDLE。我想看看这些按钮的结构，但是加载了值数据产品，所以从浏览器复制而不是像这样从IDE复制？更新的itExcellent！有一件事。如果我按下删除项目按钮。我们可以让
删除产品按钮再次消失吗。这会同时显示所有按钮，有多个按钮
class=“add product”
，这就是为什么我认为应该使用唯一的数据产品来完成@RAD11不可能，请显示有问题的响应HTML结构。寻找JSFIDLE。我想看看这些按钮的结构，但是加载了值数据产品，所以从浏览器复制而不是像这样从IDE复制？更新的itExcellent！有一件事。如果我按下删除项目按钮。我们可以让
删除产品按钮再次消失吗？哦，切换是个好主意！我喜欢。但一件奇怪的事情正在发生。第一次单击不会注册切换。仅当我向购物车添加更多项目时。如果我多次点击这个项目。按钮完全消失了。这很奇怪，因为jsFiddel确实有效…我修改了我的答案太棒了！我看看我们用哪一个！谢谢哦，开关是个好主意！我喜欢。但一件奇怪的事情正在发生。第一次单击不会注册切换。仅当我向购物车添加更多项目时。如果我多次点击这个项目。按钮完全消失了。这很奇怪，因为jsFiddel确实有效…我修改了我的答案太棒了！我看看我们用哪一个！谢谢