Question

最近我一直在做我自己的购物车，但我有一个问题，我不想在项目上添加“添加到购物车”按钮，我想通过点击项目图片添加项目到购物车;在第一次点击中添加到购物车，在第二次点击中将其从购物车中删除。

我使用了这段代码，但它不起作用需要一个按钮;

$(document).ready(function(e) {
    $('#submitbutton').click(function(e) {
        var pos = $('#inputid').val();
        alert(pos);
        return false;
    });
});

感谢您的建议

Answer 1

<div class="item" item-id="123">
  <img src="<path to item image>">
</div>

jQuery(".item").click(function  () {
  var itemId = jQuery(this).attr("item-id");
  //write logic to add item to shopping cart by item id
})

上面的代码解释了如何实现它。选择器可以更改为＆＃34; .item＆gt; IMG＆＃34;如果你想在点击图像而不是div时触发。

Answer 2

在图片中添加一个类，然后在点击时在该类上编写jquery脚本，再向包含项目srno的图像添加自定义属性

或

添加一个包含项目srno的链接的链接按钮，点击发布后再将其添加到购物车中开始播放场景

或。。。。如果你想要更多，请问

Answer 3

查看这些参考资料

https://api.jquery.com/click/

https://api.jquery.com/dblclick/

https://api.jquery.com/remove/

我会执行点击事件并定位项目图片以将项目添加到购物车，然后在项目图片上执行“.dblclick”以“。删除”购物车中的相同项目。

完成所需内容的众多方法中的一种。

Answer 4

$( "#target" ).toggle(function() {
  alert( "First handler for .toggle() called." );
}, function() {
  alert( "Second handler for .toggle() called." );
});

使用切换，它将为您提供写入功能1以进行添加和使用其他功能进行删除的范围。

Answer 5

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function () {

        $('.cart_item').click(function () {

            alert($(this).attr('image_id'))
        });

 });  
</script>
</head>
<body>
<img src="a.png" image_id="id_1" class="cart_item">
<img src="a.png" image_id="id_2"    class="cart_item">
    <img src="a.png" image_id="id_3"    class="cart_item">
    <img src="a.png" image_id="id_4"    class="cart_item">
    <img src="a.png" image_id="id_5"    class="cart_item">

</body>
</html>

Answer 6

只需将items元素视为按钮并将click事件绑定在它们上面即可！单击“添加项目到购物车”并将数据属性标志设置为该项目。因此，下次您可以检查它是否已添加到购物车中。

e.g：

<强> HTML

...
<li class="item" data-id="123">
    <img src="..." title="Product title">
</li>
...

<强>的jQuery

$(document).on('click', '.item', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $cart = $('#cart');
    var item_identifier = $this.data('id');

    // If item is in cart already, then remove
    if ($this.data('in-cart')==='yes'
        && $cart.find('li[data-id="' + item_identifier + '"]').length > 0) {
        // Script to remove from cart
        return
    }

    // else add to cart
    $this.data('in-cart', 'yes');
    var to_cart = $('li').data('id', item_identifier).html($this.html());
    $cart.append(to_cart);
});

如何在没有添加按钮的情况下将项目添加到购物车中，只需单击图片即可

6 个答案: