1

我正在尝试将购物车中使用的数量递增和递减按钮复制到我网站的另一个页面上。我创建了一个包含所有相关代码的 jsfiddle，它在实时站点上完美运行，但由于我不明白的原因，它在另一个页面上不起作用，甚至在 jsfiddle 中也不起作用。输入字段 html 是

<div class="shopping_cart_product_qty_wrapper">
<input type="text" name="cart_quantity[]" value="1" size="4" class="cart_input_1698:9fe97fff97f089661135d0487843108e" />
</div>

相关脚本是

// Add Increment/Decrement buttons
function add_quantity_buttons(element, vertical) {
    quantity_input = jQuery(element);
    quantity_input.attr('min', '0').attr('inputmode', 'numeric').attr('pattern', '[0-9]*').addClass('inc_dec_quantity_field').wrap('<div class="quantity_field_wrapper clearfix"></div>');

    if (jQuery('.device-xs').is(':visible')) {
        quantity_input.attr('type', 'number');
    } else {
        quantity_input.attr('type', 'text');
    }

    if (jQuery('.device-xs').is(':visible') && vertical !== undefined) {
        quantity_input.after('<a href="#decrease_quantity" class="quantity_dec_button">-</a>').before('<a href="#increase_quantity" class="quantity_inc_button">+</a>');
    } else {
        quantity_input.before('<?php echo ' < span class = "mobile-qty mobile-button-on" > '."Qty:".' < /span>'; ?><a href="#decrease_quantity" class="quantity_dec_button">-</a > ').after(' < a href = "#increase_quantity" class = "quantity_inc_button" > + < /a>');
    }
}

// Handle quantity buttons
// Increment/Decrement button functionality
function increment_decrement_quantity(element, value) {
    $(document.body).on('click', element, function(e) {
        e.preventDefault();
        quantity = $(this).parent().find(('input'));
        quantity_value = parseInt(quantity.val(), 10);
        quantity_multiple = undefined;

        if (quantity.data('multiple') !== undefined && (quantity.data('multiple') > 0 || quantity.data('multiple') < 0)) {
            quantity_multiple = parseInt(quantity.data('multiple'), 10);
                if (value < 0) {
                    quantity_multiple = quantity_multiple * -1;
                }
            }

            if (quantity_multiple !== undefined && (quantity_multiple > 0 || quantity_multiple < 0)) {
                quantity_value = Math.floor(quantity_value / quantity_multiple) * quantity_multiple;
                value = quantity_multiple;
            } else {
                value = parseInt(value, 10);
            }

            // Validate quantity and increment/decrement value
            if (value > 0 || value < 0 && quantity_value > 0) {
                quantity.val(quantity_value + value).trigger('change');
            }
        });
    }

    // Remove number type and add quantity change buttons
    add_quantity_buttons('#cartContentsDisplay input[name^="cart_quantity"]', true);

    // Decrement button
    increment_decrement_quantity('.quantity_dec_button', -1);

    // Increment button
    increment_decrement_quantity('.quantity_inc_button', +1);

    // Quantity input validation
    var ajax_called = false;
    $(document.body).on('propertychange change click keyup input paste blur', '.inc_dec_quantity_field', function(e) {
        character_code = !e.charCode ? e.which : e.charCode;
        quantity_value = $(this).val();
        leading_zero_plus_regexp = /^(0[0-9]|\+[\+,0-9]).*$/;

        // When input goes out of focus validate quantity value
        if (e.type == 'blur' && (quantity_value == '' || isNaN(quantity_value / 1) == true || isNaN(quantity_value / 1) == false && quantity_value <= 0)) {
            $(this).val('0');
        } else {
            // Check for numeric value and allow backspace, delete, left and right arrows
            if ((isNaN(quantity_value / 1) == false && quantity_value > 0) || (character_code != undefined && (character_code == 39 || character_code == 37 || character_code == 8 || character_code == 46))) {
                // Correct value
                // Make sure the quantity is integer
                if (quantity_value != '' && isNaN(quantity_value / 1) == false && (quantity_value != parseInt(quantity_value, 10) || leading_zero_plus_regexp.test(quantity_value))) {
                    $(this).val(parseInt(quantity_value, 10));
                }
            } else if (character_code != undefined) {
                // Incorrect value
                $(this).val('0');
            } else if (quantity_value != '' && isNaN(quantity_value / 1) == false && (quantity_value != parseInt(quantity_value, 10) || leading_zero_plus_regexp.test(quantity_value))) {
                // Make sure the quantity is integer
                $(this).val(parseInt(quantity_value, 10));
            }
        }
});

小提琴可以在这里找到：https ://jsfiddle.net/pv27ue9g/1/

预期的结果应该给出这样的数量字段： 在此处输入图像描述

我从页面中删除了所有的 js 和 css，只留下了在我把小提琴放在一起之前使增量按钮工作所需的东西，所以我相当确定没有任何遗漏。

我希望 SO 的专家能够发现问题，因为我整天都在摸索这个问题，并且还没有弄清楚为什么它不能按预期运行！

4

1 回答 1

2

这一行的引号有问题——你可以在语法高亮中看到

   quantity_input.before('<?php echo ' < span class = "mobile-qty mobile-button-on" > '."Qty:".' < /span>'; ?><a href="#decrease_quantity" class="quantity_dec_button">-</a > ').after(' < a href = "#increase_quantity" class = "quantity_inc_button" > + < /a>');
于 2019-09-16T17:25:56.760 回答