如何使用JS将数字字段转换为文本字段

时间:2016-09-09 作者:Benbodhi

我正在将WooCommerce数量字段设置为文本字段,这样看起来更好,但我不知道如何使用减号按钮。加号按钮工作得很好,但我不知道为什么减号按钮不工作,它什么都不做。

也许有更熟悉JS的人可以看到我的问题?

jQuery(document).ready(function ($) {
    // Containing selector
    var parentSelector = $(\'.quantity\');
    // If it\'s on the page
    if( parentSelector.length ) {

        // Get the original HTML
        var numberInputs = parentSelector.html();
        // Minus button
        var btnLess = \'<button class="minus">-</button>\';
        // Change number to text
        var textInputs = numberInputs.replace(\'type="number"\', \'type="text"\');
        // Plus button
        var btnMore = \'<button class="plus">+</button>\';
        // Append it all
        parentSelector.append(btnLess + textInputs + btnMore);
        // Hide the original
        parentSelector.find(\'input[type="number"]\').hide();

        // increase or decrease the count
        $(\'.plus, .minus\').on(\'click\', function(e) {

            e.preventDefault();

            var newCounter = $(this).prevAll(\'input.qty[type="text"]\');
            var oldCounter = $(this).prevAll(\'input.qty[type="number"]\');
            var counterVal = newCounter.val();

            if( $(e.target).hasClass(\'plus\') ) {

                counterVal++ ;

            } else {

                counterVal-- ;

            }

            // Apply to both inputs
            newCounter.val(counterVal);
            oldCounter.val(counterVal);

        });
    }
});

1 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

原始代码正在使用prevAll 但目标输入稍后会出现在DOM中。PrevAll 加号按钮工作正常,因为目标输入在加号按钮之前。

以下修改后的代码已测试并运行:

jQuery(document).ready(function ($) {

    // Containing selector
    var parentSelector = $(\'.quantity\');
    // If it\'s on the page
    if( parentSelector.length ) {

        // Get the original HTML
        var numberInputs = parentSelector.html();
        // Minus button
        var btnLess = \'<button class="minus">-</button>\';
        // Change number to text
        var textInputs = numberInputs.replace(\'type="number"\', \'type="text"\');
        // Plus button
        var btnMore = \'<button class="plus">+</button>\';
        // Append it all
        parentSelector.append(btnLess + textInputs + btnMore);
        // Hide the original
        parentSelector.find(\'input[type="number"]\').hide();

        // increase or decrease the count
        $(\'.plus, .minus\').on(\'click\', function(e) {

            e.preventDefault();

            if( $(e.target).hasClass(\'plus\') ) {
              var newCounter = $(this).prevAll(\'input.qty[type="text"]\');
              var oldCounter = $(this).prevAll(\'input.qty[type="number"]\');
              var counterVal = newCounter.val();

              counterVal++ ;

            } else {
              var newCounter = $(this).nextAll(\'input.qty[type="text"]\');
              var oldCounter = $(this).nextAll(\'input.qty[type="number"]\');
              var counterVal = newCounter.val();

              counterVal-- ;
            }

            // Apply to both inputs
            newCounter.val(counterVal);
            oldCounter.val(counterVal);

        });
    }
});