【问题标题】:gravity forms subtotal next to each product quantity jquery每个产品数量jquery旁边的重力形式小计
【发布时间】:2012-08-13 21:32:40
【问题描述】:

我正在使用 Gravity Forms 产品字段来创建订单表单类型系统。

我正在尝试计算每个产品的小计(成本 * 数量)并通过 jQuery 将其显示在数量旁边。

这是我的 jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $('.gfield_price .ginput_container').append('<div class="product_subtotal">SUBTOTAL</div>');
        $('.ginput_quantity').keypress( function( ) {
            $x = $('.ginput_quantity');
            $x.next('div.product_subtotal').html( this.value );
        });
    });
</script>

这是我的 html 的 sn-p:

<li id='field_5_12' class='gfield gfield_price gfield_price_5_12 gfield_product_5_12' >
    <label class='gfield_label' for='input_5_12'>500 GPH Bilge Pump 24V</label>
    <div class='ginput_container'>
        <input type='hidden' name='input_12.1' value='500 GPH Bilge Pump 24V' class='gform_hidden' />
        <span class='ginput_product_price_label'>Price:</span>
        <span class='ginput_product_price' id='input_5_12'>$2.99</span>
        <input type='hidden' name='input_12.2' id='ginput_base_price_5_12' class='gform_hidden' value='$2.99'/>
        <span class='ginput_quantity_label'>Quantity:</span>
        <input type='text' name='input_12.3' value='' id='ginput_quantity_5_12' class='ginput_quantity' size='10' tabindex='6'/>
    </div>
</li>

如您所见,目前我只是尝试使用在数量字段中输入的值来更新 product_subtotal div。稍后我会担心实际的计算。我的问题是我不确定如何只选择下一个 div.product_subtotal,因为 $x.next() 会选择每个 product_subtotal。

【问题讨论】:

    标签: jquery wordpress gravity subtotal


    【解决方案1】:

    您的next() 方法选择所有类为.product_subtotal 的div 标签,因为您在调用next() 方法之前选择页面上的所有.ginput_quantit 输入,该方法选择所有类为@987654325 的div 标签@,试试这个:

    $('.ginput_quantity').keypress( function( ) {
        $x = $(this); // just this input element
        $x.next('div.product_subtotal').html( this.value ); 
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-07-10
      • 2021-04-27
      • 1970-01-01
      • 2021-11-20
      • 2018-12-14
      • 2017-04-06
      • 2017-12-15
      相关资源
      最近更新 更多