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变量，但我不知道如何重写这段代码。

另外，我尝试使用不同的输入数字微调器，但问题是它们只是“视觉上”改变了值，但事实上它并没有改变。因为此输入中的数字必须更改全局编号（产品的价格）（其他脚本），但它没有更改。所以初始全局数= 1000，数字微调器1全局价格= 1000 + 1 x某个数字。

因此，如果更容易说出如何使脚本“更新”输入内部的值，那就太棒了。

非常感谢！

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输入数字微调器在页面上更改所有微调器

1 个答案: