jquery - 将产品添加到购物车的按钮

Question

我的购物车在这里http://jsfiddle.net/bkw5p/48/

我想在产品上向用户显示一个按钮，以将该产品添加到购物车中。例如：当单击产品上的按钮时，它应该添加到购物车而不是拖动到购物车我需要一个按钮来将该产品添加到购物车

我已经尝试过了，但我无法得到它。请尽快帮助解决此问题

谢谢并恭祝安康

s.varun

Answer 1

@ClarkeyBoy - 我不认为 Varun 在这个阶段要求让商店真正“运作”。如果我理解与 darksky 相同，那么它只是添加一个按钮来执行与 drop 功能相同的操作。

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

编辑更多最新的 JS Fiddle（根据下面的评论）http://jsfiddle.net/joevallender/VTtUr/6

我建议使用普通的 jQuery UI 而不是 easyui。前者有一个“取消”选项，它允许除选择器之外的所有内容来处理http://forum.jquery.com/topic/how-do-i-prevent-dragging-when-a-button-is-clicked-within -可拖动容器

一点重构和“添加到购物车”功能可用于我的不同事件

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());
});

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

Answer 2

尝试这个

解决方案如下

使用打击代码并尝试一下

<a data-role="link" href="javascript:linkHandler('<%= obj.productname %>', '<%= obj.price %>')" class="get" >Add <a>



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