人员字段加减按钮

问题描述

我有一个带有动态创建的 ID 的“人数”表单字段。该字段是 QTY 输入类型 =“数字”，我想在每一侧使用加号/减号键。

我添加了按钮和一些 jquery，但是，因为我有多个“person_types”字段，加/减 onclick 会同时影响所有字段。如何使用 foreach 之类的东西定位单个字段？

这是我当前的代码

// get IDs from dynamic person_type field
        $("input[id^='wc_bookings_field_persons_']").each(function() {
            var id = parseInt(this.id.replace("wc_bookings_field_persons_",""),10);
            var qty = $("#wc_bookings_field_persons_" + id);
            
            // target the form
            $('form.cart').on( 'click','button.plus,button.minus',function() {
            
              // Get current quantity values
              var qty = $( this ).closest( 'form.cart' ).find( "#wc_bookings_field_persons_" + id);
               // also tried this 
                // var qty = $( this ).closest( 'form.cart' ).find( "#wc_bookings_field_persons_" + id + ".qty");

              var val   = parseFloat(qty.val());
              var max = parseFloat(qty.attr( 'max' ));
              var min = parseFloat(qty.attr( 'min' ));
              var step = parseFloat(qty.attr( 'step' ));
   
              // Change the value if plus or minus
              if ( $( this ).is( '.plus' ) ) {
                 if ( max && ( max <= val ) ) {
                    qty.val( max );
                 } 
              else {
                 qty.val( val + step );
                   }
              } 
              else {
                 if ( min && ( min >= val ) ) {
                    qty.val( min );
                 } 
                 else if ( val > 1 ) {
                    qty.val( val - step );
                 }
              } 
        
        });

   });

和 html

    <p class="form-field form-field-wide <?PHP echo esc_attr( implode( ' ',$class ) ); ?>">
     <label for="<?PHP echo esc_attr( $name ); ?>"><?PHP echo esc_html( $label ); ?>:</label>


   <button type="button" class="minus" >-</button>

   <input class="qty" 
type="number"
value="<?PHP echo ( ! empty( $min ) ) ? esc_attr( $min ) : 0; ?>"
step="<?PHP echo ( isset( $step ) ) ? esc_attr( $step ) : ''; ?>"
min="<?PHP echo ( isset( $min ) ) ? esc_attr( $min ) : ''; ?>"
max="<?PHP echo ( isset( $max ) ) ? esc_attr( $max ) : ''; ?>"
name="<?PHP echo esc_attr( $name ); ?>"
id="<?PHP echo esc_attr( $name ); ?>"
/> 

     <button type="button" class="plus" >+</button>

   <?PHP echo ( ! empty( $after ) ) ? esc_html( $after ) : ''; ?>

   </p>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）