javascript - 增量按钮未附加到数量字段

Question

我正在尝试将我的购物车中使用的数量递增和递减按钮复制到我网站的另一个页面上。我创建了一个包含所有相关代码的 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));
            }
        }
});

fiddle 可以在这里找到:https://jsfiddle.net/pv27ue9g/1/

预期结果应该给出数量字段，如下所示:

我从页面中删除了所有的 js 和 css，只留下在我组装 fiddle 之前使增量按钮工作所需的内容，所以我相当确定没有遗漏任何东西。

我希望 SO 方面的专家能够发现问题，因为我整天都在为这个问题挠头，而且还没有更进一步地弄清楚为什么它没有按预期运行!

Answer 1

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

   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>');