JQuery 输入数字微调器更改页面上的所有微调器

Question

首先，大家好！我不会JQuery，刚开始学Javascript。所以在下面你会看到我在我网站的其他地方使用和使用的代码，但它没有正常工作。问题是我使用的代码本来是要在页面上只有一个数字微调器，但我需要有多个。

代码：

<script>
jQuery(
    function( $ ) {
        if ( typeof js_local_vars.woocommerce_23 !== 'undefined' ) {
            var $testProp = $( 'div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)' ).find( 'AddnQty' );
            if ( $testProp && $testProp.prop( 'type' ) != 'date' ) {
                // Quantity buttons
                $( 'div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)' ).addClass( 'buttons_added' ).append( '<input type="button" value="+" class="plus" />' ).prepend( '<input type="button" value="-" class="minus" />' );

                // Target quantity inputs on product pages
                $( 'input.AddnQty:not(.product-quantity input.AddnQty)' ).each(
                    function() {

                        var min = parseFloat( $( this ).attr( 'min' ) );

                        if ( min && min > 0 && parseFloat( $( this ).val() ) < min ) {
                            $( this ).val( min );
                        }
                    }
                );

                $( document ).on(
                    'click', '.plus, .minus', function() {

                        // Get values
                        var $AddnQty = $( this ).closest( '.quantity' ).find( '.AddnQty' ),
                            currentVal = parseFloat( $AddnQty.val() ),
                            max = parseFloat( $AddnQty.attr( 'max' ) ),
                            min = parseFloat( $AddnQty.attr( 'min' ) ),
                            step = $AddnQty.attr( 'step' );

                        // Format values
                        if ( !currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
                        if ( max === '' || max === 'NaN' ) max = '';
                        if ( min === '' || min === 'NaN' ) min = 0;
                        if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;

                        // Change the value
                        if ( $( this ).is( '.plus' ) ) {

                            if ( max && ( max == currentVal || currentVal > max ) ) {
                                $AddnQty.val( max );
                            } else {
                                $AddnQty.val( currentVal + parseFloat( step ) );
                            }

                        } else {

                            if ( min && ( min == currentVal || currentVal < min ) ) {
                                $AddnQty.val( min );
                            } else if ( currentVal > 0 ) {
                                $AddnQty.val( currentVal - parseFloat( step ) );
                            }

                        }

                        // Trigger change event
                        $AddnQty.trigger( 'change' );
                    }
                );
            }
        }

    }
);
</script>

是PHP，不是HTML。这是代码：

 <div class="quantity">
        <input type="number" autocomplete="off" step="" 
class="input-text addon addon-input_multiplier AddnQty text" 
data-price="<?php echo get_product_addon_price_for_display( $option['price'] ); ?>" 
name="<?php echo $addon_key ?>[<?php echo $option_key; ?>]" 
title="<?php echo esc_attr_x( 'AddnQty', 'Product quantity input tooltip', 'woocommerce' ) ?>" 
value="<?php echo ( esc_attr( $current_value ) == '' ? $option['min'] : esc_attr( $current_value ) ); ?>" 
</div>

我知道问题出在 AddnQty 变量上，但我不知道如何重写这段代码。

此外，我尝试使用不同的输入数字微调器，但问题是它们只更改了值 'visually' 但实际上它并没有改变。因为此输入中的数字必须更改全局数字（产品价格）（其他脚本）但它没有改变。所以初始全球数量 = 1000，数字旋转器 1 全球价格 = 1000 + 1 x 一些数字。

因此，如果更容易说明如何使脚本 "update" 输入内的值，那就太好了。

非常感谢！

Answer 1

这是一个 jsFiddle，其中的代码在多个输入上运行良好。

JSFiddle Code

$(function() {

var $testProp = $('div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)').find('.AddnQty');
if ($testProp && $testProp.prop('type') != 'date') {
  // Quantity buttons
  $('div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)').addClass('buttons_added').append('<input type="button" value="+" class="plus" />').prepend('<input type="button" value="-" class="minus" />');

  // Target quantity inputs on product pages
  $('input.AddnQty:not(.product-quantity input.AddnQty)').each(
    function() {

      var min = parseFloat($(this).attr('min'));

      if (min && min > 0 && parseFloat($(this).val()) < min) {
        $(this).val(min);
      }
    }
  );

  $(document).on(
    'click', '.plus, .minus',
    function() {

      // Get values
      var $AddnQty = $(this).closest('.quantity').find('.AddnQty'),
        currentVal = parseFloat($AddnQty.val()),
        max = parseFloat($AddnQty.attr('max')),
        min = parseFloat($AddnQty.attr('min')),
        step = $AddnQty.attr('step');

      // Format values
      if (!currentVal || currentVal === '' || currentVal === 'NaN') currentVal = 0;
      if (max === '' || max === 'NaN') max = '';
      if (min === '' || min === 'NaN') min = 0;
      if (step === 'any' || step === '' || step === undefined || parseFloat(step) === 'NaN') step = 1;

      // Change the value
      if ($(this).is('.plus')) {

        if (max && (max == currentVal || currentVal > max)) {
          $AddnQty.val(max);
        } else {
          $AddnQty.val(currentVal + parseFloat(step));
        }
      } else {

        if (min && (min == currentVal || currentVal < min)) {
          $AddnQty.val(min);
        } else if (currentVal > 0) {
          $AddnQty.val(currentVal - parseFloat(step));
        }
      }

      // Trigger change event
      $AddnQty.trigger('change');
    }
  );
}

});

JQuery 输入数字微调器更改页面上的所有微调器

JQuery input number spinner changing ALL spinners on page

javascript

jquery

numbers

spinner