Question

按下按钮时会出现两个功能。第一个功能是＆＃34; item1＆＃34;添加到购物车，第二个功能是按钮图像从＆＃34; add.png＆＃34; to＆＃34; minus.png＆＃34;。按钮切换到＆＃34; minus.png＆＃34;期望的结果是将物品从购物车中移除并将图像过渡到其原始的＆＃34; add.png＆＃34;如果再次按下该按钮。 http://simplecartjs.org/documentation/simplecart-item-remove

按钮示例：http://jsfiddle.net/9kmun19z/

＆＃13;

<img id="button" onclick="addbeat(event);changeImage()" name="item1" src="add.png"/>

<script>
function addbeat(event) {
simpleCart.add({
     name: event.target.name,
     price: .99
 });
}
function changeImage() {
    var image = document.getElementById('button');
    if (image.src.match("minus")) {
        image.src = "add.png";
    } else {
        image.src = "minus.png";
simpleCart.item.remove();({
     name: event.target.name,
     price: .99
 });
    }
}
</script>

＆＃13;

Answer 1

为什么不使用两个按钮来满足您的需求。

将不同的功能绑定到两个按钮;

使用css display：none / block来控制将显示哪个按钮。

然后一切都好吗

Answer 2

你可以使用jquery，它会帮助你很多。

见这个例子：

<img id="button" data-product-id="XYZ" name="items" src="add.png"/>


<script>
$("#button").toggle(function(){
    //first functon here
    simpleCart.add({
     name: $(this).attr("data-product-id"),
     price: .99
    });
    //we set src of image with jquery
    $(this).attr("src", "image/path/to_1.png");
},function(){
    //second function here
    //simplecart remove function here, this isjust example, adjust with your code
    simpleCart.remove({
     name: $(this).attr("data-product-id")
    });
    $(this).attr("src", "image/path/to_2.png");
});
</script>

Answer 3

看起来你把简单的购物车移到错误的分支中 - 你想在减号按钮显示时删除该项目

function changeImage() {
 var image = document.getElementById('button');
 if (image.src.match("minus")) {
   simpleCart.item.remove();({
     name: event.target.name,
     price: .99
     });
   image.src = "add.png";
   } else {
   image.src = "minus.png";
   }

}

Answer 4

虽然花了一些时间，但是我能够使用Kadugedboy推荐的Jquery以及函数中的quantity = 1和quantity = -1来获得所需的效果。您需要做的一件事就是确保Jquery 1.7安装或更低，因为他们删除了较新版本中的toggle（）功能。

＆＃13;

<img class="button" data-product-id="XYZ" src="add.png"/>


<script>
$(".button").toggle(function(){
    //first functon here
    simpleCart.add({
     name: $(this).attr("data-product-id"),
     price: .99,
	 quantity: 1
    });
    //we set src of image with jquery
    $(this).attr("src", "minus.png");
},function(){
    //second function here
    //simplecart remove function here, this isjust example, adjust with your code
	simpleCart.add({
     name: $(this).attr("data-product-id"),
     price: .99,
	 quantity: -1
    });
    $(this).attr("src", "add.png");
});
</script>

＆＃13;

如何使Javascript函数changeImage（）删除项目

4 个答案: