jQuery技术:用于将产品添加到购物车的按钮

试试这个

解决方案如下

使用吹码并试一试

 Add  function linkHandler(name, price) { alert(name); alert(price); var name = name; var price = price; var cartItem = new item(name, parseFloat(price)); // check duplicate var match = ko.utils.arrayFirst(viewModel.cartItems(), function(item){ return item.name == name; }); if(match){ match.qty(match.qty() + 1); } else { viewModel.cartItems.push(cartItem); var rowCount = document.getElementById("cartcontent1").getElementsByTagName("TR").length; document.getElementById("Totala").innerHTML = rowCount; } } 

@ClarkeyBoy – 我不认为Varun在这个阶段非常想要让这家店真正“工作”。 如果我理解为和darksky一样，那么只需添加一个按钮来执行与drop函数相同的操作。

我已经破解了在这里工作的小提琴： http ： //jsfiddle.net/joevallender/VTtUr/4/使用img作为可拖动的句柄允许

编辑更新最新的JS Fiddle（根据下面的评论）

我建议使用普通的jQuery UI而不是easyui。 前者有一个’取消’选项，允许除了选择器之外的所有东西都可以使用https://forum.jquery.com/topic/how-do-i-prevent-dragging-when-a-button-is-clicked-within -the-可拖动容器

一个小的重构和’添加到购物车’function可用于我的不同事件

 function addToCart(source) { var name = source.find('p:eq(0)').html(); var price = source.find('p:eq(1)').html(); var cartItem = new item(name, parseFloat(price.split('$')[1])); var match = ko.utils.arrayFirst(viewModel.cartItems(), function(item) { return item.name == name; }); if (match) { match.qty(match.qty() + 1); } else { viewModel.cartItems.push(cartItem); var rowCount = document.getElementById("cartcontent1").getElementsByTagName("TR").length; document.getElementById("Total").innerHTML = rowCount; } } 

所以它可以通过drop使用

 $('.cart').droppable({ onDrop: function(e, source) { addToCart($(source)); } }); 

并单击

 $('.item .add-to-cart').click(function() { addToCart($(this).parent()); }); 

我不会开始挑选其余代码的细节，因为我可以看到你仍在测试和搞乱，只是想要一个特定的答案。