如何在不单击按钮的情况下将商品添加到购物车中，只需单击图片
[英]how to add items to shopping cart without adding button just on click on the picture
问题描述
Recently i have been doing my own shopping cart but i have a problem , i don't want to add "add to cart" button on the item , i want to add items to the shopping cart by clicking on the items pictures; 
最近，我一直在做自己的购物车，但是我有一个问题，我不想在商品上添加“添加到购物车”按钮，我想通过单击商品图片将商品添加到购物车； in the first click adding to cart and in the second one remove it from the cart . 在第一次单击添加到购物车中，在第二次单击将它从购物车中删除。
I used this code but it does not work it needs a button; 我使用了这段代码，但是它不起作用，需要一个按钮；
$(document).ready(function(e) {
$('#submitbutton').click(function(e) {
var pos = $('#inputid').val();
alert(pos);
return false;
});
});
thanks for advice 谢谢你的建议
6 个解决方案
解决方案1
1 2016-01-25 05:59:24
<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
})
Code above explains how it can be achieved. 上面的代码说明了如何实现。 selector can be changed to ".item > img" if you want to trigger on clicking the image rather than div. 如果要触发单击图像而不是div，可以将选择器更改为“ .item> img”。
解决方案2
0 2016-01-25 05:53:03
Add a class to picture, then write jquery script on that class on click, plus add a custom attribute to the image containing the item srno 将一个类添加到图片，然后在单击时对该类编写jquery脚本，并向包含项srno的图像添加一个自定义属性
or 要么
add a link button with link containing item srno ,on click post it then add it to the cart begind the scenes 添加带有包含项目srno的链接的链接按钮，单击后将其添加，然后将其添加到购物车中开始场景
or . 要么 。 . 。 . 。 . 。 if you want more,just ask 如果你想要更多，问一下
解决方案3
0 2016-01-25 05:56:16
Check out these references 查看这些参考
https://api.jquery.com/click/ https://api.jquery.com/click/
https://api.jquery.com/dblclick/ https://api.jquery.com/dblclick/
https://api.jquery.com/remove/ https://api.jquery.com/remove/
I would do a click event and target the items picture to add the item to the cart and then do a ".dblclick" on the item picture to ".remove" the same item from the cart. 我将执行一次click事件，然后将商品图片定位到将商品添加到购物车中，然后在商品图片上执行“ .dblclick”，以从购物车中“ .remove”相同商品。
Just one of many ways of accomplishing what you need. 只是完成您所需要的多种方式之一。
解决方案4
0 2016-01-25 05:58:26
$( "#target" ).toggle(function() {
alert( "First handler for .toggle() called." );
}, function() {
alert( "Second handler for .toggle() called." );
});
Use toggle, it will give you scope to write to function one for add and another for remove. 使用切换，它将为您提供编写函数的范围，一个函数用于添加，另一个函数用于删除。
解决方案5
0 2016-01-25 06:12:28
<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>
解决方案6
0 已采纳 2016-01-25 06:14:23
Just treat items element as a button and bind click event on them! 只需将items元素视为按钮并在其上绑定click事件！ On click add item to cart and set a data attribute flag to that item. 单击时，将项目添加到购物车并为该项目设置数据属性标志。 So, next time you can check whether it is in added to cart or not. 因此，下次您可以检查它是否已添加到购物车中。
eg: 例如：
HTML 的HTML
...
<li class="item" data-id="123">
<img src="..." title="Product title">
</li>
...
jQuery 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);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.