将 jquerys .toggle() 重写为 .click() 函数

Question

当点击带有 class "button" 的 "add.png" 图片时，它会将商品添加到购物车并转换为 "remove.png" 当再次点击它时，它将从中删除商品购物车并变回原来的 "add.png"

这适用于 Jquery 1.7 及更低版本，但 .toggle() 功能已从较新版本的 Jquery 中删除。

期望的结果是执行完全相同的任务，但使用 .click() 而不是 .toggle()

<img class="button" data-product-id="Item1" 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", "remove.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>

Answer 1

您可以改用旗帜

$(".button").on('click', function(){
    var flag = $(this).data('flag');

    simpleCart.add({
        name     : $(this).attr("data-product-id"),
        price    : .99,
        quantity : (flag ? 1 : -1)
    });

    $(this).attr("src", flag ? "remove.png" : "add.png")
           .data('flag', !flag);
});

将 jquerys .toggle() 重写为 .click() 函数

Rewrite jquerys .toggle() into a .click() function

javascript

jquery

html

rewrite

toggle