javascript - 如何使 Javascript 函数 changeImage() 删除项目

Question

当按下按钮时，会出现两个功能。第一个功能是将“item1”添加到购物车，第二个功能是将按钮图像从“add.png”更改为“minus.png”。将按钮切换到“minus.png”后，如果再次按下按钮，则期望的结果是从购物车中删除该项目，并且图像转换为其原始“add.png”。 http://simplecartjs.org/documentation/simplecart-item-remove

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

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

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

花了一点时间，但我能够使用 Kadgedboy 推荐的 Jquery 以及函数中的数量 = 1 和数量 = -1 来获得预期的效果，你必须做的一件事是确保 Jquery 1.7 或更低版本是安装，因为他们删除了较新版本中的 toggle() 功能。

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