Question

我使用下面的jQuery脚本来增加和减少我的Magento购物车中的商品数量，但是加号按钮位于方框和上方的减号按钮之下。

认为这是一个简单的解决方法，我改变了.append和.prepend参数，但没有成功。

这使图标按正确的顺序排列，但功能只是停止工作。我假设这与下面列出的函数的顺序有关，但是我不会精明地使用jQuery！

jQuery(document).ready(function () {
    jQuery("div.quantity")
    .append('<input type="image" src="/checkout/plus.png" name="update_cart_action" value="+" id="add1" class="plus" />')
    .prepend('<input type="image" src="/checkout/minus.png" name="update_cart_action" value="-" id="minus1" class="minus" />');

jQuery(".plus").click(function () {
    var currentVal = parseInt(jQuery(this).prev(".qty").val());
    if (!currentVal || currentVal == "" || currentVal == "NaN") currentVal = 1;
    jQuery(this).prev(".qty").val(currentVal + 1);
});

jQuery(".minus").click(function () {
    var currentVal = parseInt(jQuery(this).next(".qty").val());
    if (currentVal == "NaN") currentVal = 1;
    if (currentVal > 1) {
        jQuery(this).next(".qty").val(currentVal - 1);

    }
});
});

Answer 1

当您切换.append和.prepend时，您需要更改点击功能中的.next和.prev，因为您已更改了元素。试试这个：

jQuery(".plus").click(function (e) {
    e.preventDefault();
    var currentVal = parseInt(jQuery(this).next(".qty").val());
    if (!currentVal || currentVal == "" || currentVal == "NaN") currentVal = 1;
    jQuery(this).next(".qty").val(currentVal + 1);
});

jQuery(".minus").click(function (e) {
    e.preventDefault();
    var currentVal = parseInt(jQuery(this).prev(".qty").val());
    if (currentVal == "NaN") currentVal = 1;
    if (currentVal > 1) {
        jQuery(this).prev(".qty").val(currentVal - 1);
    }
});

我已添加e.preventDefault()以停止在单击按钮时回发表单。

另外，我会从按钮中删除ID，就好像你有多个数量div一样，你将有多个具有相同id的按钮

Answer 2

您需要使用.on()处理程序跟踪事件委派语法：

jQuery('div.quantity').on('click', '.plus', function () { // for plus

和

jQuery('div.quantity').on('click', '.minus', function () { // for minus

因为你的按钮是用js动态添加的，所以绑定它们的事件不会以这种方式工作，所以你必须将事件委托给最接近的静态父$('div.quantity')，或者直接绑定到$(document) 未提供。

Plus＆amp;减号按钮 - Magento购物车 - jQuery错误

2 个答案: