Question

我正在使用WordPress中的WooCommerce我想添加自己的按钮来增加或减少数量值。我找到了一些帮助我这样做的代码，但我注意到如果数量值等于什么，我不能使用我自己的按钮将其增加回一个它只是保持为空，但是默认按钮会将其增加回一个。

我如何检查该值是否等于零，并将其设置为1？我尝试用if语句自己做，但它没有用。

jQuery('.plus').on('click',function(e){
        var val = parseInt($(this).prev('input').val());
        jQuery(this).prev('input').val( val+1 );

        if( jQuery(isNaN(val)) ){
            jQuery(this).val() = 1;
        }
    });

    jQuery('.minus').on('click',function(e){
        var val = parseInt($(this).next('input').val());
        if(val !== 0){
            jQuery(this).next('input').val( val-1 );
        } 
    });

<div class="quantity">
		<input class="minus" type="button" value="-">
		<input type="number" class="input-text qty text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
		<input class="plus" type="button" value="+">
</div>

Answer 1

您正在为val函数赋值，而您需要传递()中的值它接受该值作为参数。另一件事是您尝试更新+按钮的值，而不是像{i}这样使用input来更新jQuery(this).prev('input').val(1);字段的值

jQuery('.plus').on('click', function(e) {
  var val = parseInt($(this).prev('input').val());
  jQuery(this).prev('input').val(val + 1);

  if (isNaN(val)) {
    jQuery(this).prev('input').val(1);
  }
});

jQuery('.minus').on('click', function(e) {
  var val = parseInt($(this).next('input').val());
  if (val !== 0) {
    jQuery(this).next('input').val(val - 1);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
  <input class="minus" type="button" value="-">
  <input type="number" class="input-text qty text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>"
    title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
  <input class="plus" type="button" value="+">
</div>

Answer 2

我宁愿使用内联三元运算符来修复输入生成。

您实际上是使用以下内容生成输入值：

value="<?php echo esc_attr( $input_value ); ?>"

通过检查值，您始终可以插入有效数字，使用

防止无效值

value="<?php echo esc_attr( $input_value >= 0 ? $input_value : 0 ); ?>"

但是，如果你需要保持空值只需依靠Sanchit Patiyal的回答

如果单击时为空，如何将输入值设置为1

2 个答案: