jquery 输入字段更改 wordpress 中的所有 php 循环项值答案

【问题标题】：jquery input field changes all php loop items value in wordpressjquery 输入字段更改 wordpress 中的所有 php 循环项值
【发布时间】：2018-05-07 21:55:14
【问题描述】：

我正在尝试为产品创建自定义 wordpress 模板。为此，我需要在增加或减少 2 个子数量时更新总数量。总数量的价值也会乘以价格。

假设： sub-quantity-1 值 = 2 和 sub-quantity-2 值 = 3， 所以 总数量价值 = 5 和 价格是 5 x $100 = $500

问题是我使用 wordpress 循环生成这个输入字段，所以所有输入都有相同的类和名称。

假设：我正在增加 PRODUCT 1 的 sub-quantity，这会增加 PRODUCT 1 的所有 Total Quantity > 到 PRODUCT 100

PHP 代码：

    <?php $wp_query = new WP_Query( array(
        'post_type'      => 'product',
        'post__in'       => array( 481, 478, 934, 178 ),
        'posts_per_page' => 15,
        'offset'         => 0, 
        'orderby'        => '', 
        'order'          => 'ASC' ) ); 
    ?>
    <?php if ( $wp_query->have_posts() ) :  while ( $wp_query->have_posts() ) :  $wp_querys->the_post();
    global $product;
    $product = get_product( get_the_ID() ); 
    ?>
    <table>

        <thead>
            <tr>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total Quantity</th>
                <th>Button</th>
            </tr>
        </thead>

        <tbody class="products-container">

            <tr class="product-<?php echo esc_attr( $product->id ); ?>"> 

                <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>

                    <td class="price">

                        <span class="woocommerce-Price-amount amount">
                            <span class="woocommerce-Price-currencySymbol">
                                <?php echo get_woocommerce_currency_symbol(); ?>
                            </span>
                            <?php echo $product->get_price() ?>
                        </span>
                    </td>



                    <td class="quantity">
                        <table>
                            <tr>
                                <?php echo qty-sz(); ?>

                            </tr>

                            <tr>
                                <?php echo qty-bn(); ?>

                            </tr>
                        </table>

                    </td>




                    <td class="quantity-total">
                        <?php woocommerce_quantity_input(); ?>
                    </td>

                    <td class="button">

                        <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
                        <input type="hidden" name="product_id" value="<?php echo esc_attr( $product->id ); ?>" />
                        <input type="hidden" name="variation_id" class="variation_id" value="0" />
                        <button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart" />Add to Cart</button>

                    </td>

                </form>                                       

            </tr>
        </tbody>

        <?php endwhile; wp_reset_query();?>

    </table>

生成的 HTML 代码：

                    <table>

                <thead>
                  <tr>
                    <th></th>
                    <th>Product</th>
                    <th>Note Box</th>
                    <th>Price</th>
                    <th>Choose Your Keyblade</th>
                    <th>Product Total Quantity</th>
                    <th></th>
                  </tr>
                  </thead>

                <tbody>




                    <tr class="product-934" data-role="product"> 

                    <form action="/testsite/wholesale-product-page-template-custom/?add-to-cart=934" class="cart" method="post" enctype="multipart/form-data"></form>

                        <td class="image">


                                <img src="https://localhost/testsite/wp-content/plugins/woocommerce/assets/images/placeholder.png" alt="Placeholder" width="150px" height="150px">                      </td>

                            <td class="title">
                                <h3>Group Product</h3>
                            </td>

                            <td class="note">
                                                            <label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER">                     </td>

                            <td class="price">

                                <span class="woocommerce-Price-amount amount">
                                    <span class="woocommerce-Price-currencySymbol">
                                        $                               </span>
                                    786                         </span>

                            </td>



                            <td class="keyblade">
                                <table>
                                    <tbody><tr>
                                        <th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td>                                </tr>

                                    <tr>
                                        <th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td>                                </tr>
                                </tbody></table>

                            </td>

                            <td class="quantity-field">
                                                            <div class="quantity">
                                    <input step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
                                </div>
                            </td>

                            <td class="button">

                                <input name="add-to-cart" value="934" type="hidden">
                                <input name="product_id" value="934" type="hidden">
                                <input name="variation_id" class="variation_id" value="0" type="hidden">
                                <button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart">Add to Cart</button>

                            </td>




                    </tr>
                </tbody>



                        <style>.product-type-variable .summary .price { display: inline-block; } .quantity { display: inline-block; }</style>

                            <tbody><tr class="product-719 variation-722 wrapper" data-role="product"> 
                  <form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>   
                    <td class="image">
                        <img src="https://localhost/testsite/wp-content/uploads/2016/10/151-Sterling-Silver-Pink-Tourmaline.png" alt="Custom Key Blades-722" width="150px" height="150px">              </td>
                    <td class="title">
                        <h3>Custom Key Blades</h3><br>
                        <b>18 K Yellow Gold  </b>
                        </td>

                    <td class="note">
                                            <label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER">             </td>   
                    <td class="price">
                        <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,150.00</span></span>                </td>
                    <td class="keyblade">
                        <table>
                            <tbody><tr>
                                <th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td>                        </tr>

                            <tr>
                                <th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td>                        </tr>
                        </tbody></table>

                    </td>



                        <td>
                            <div class="quantity">
        <input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
    </div>
                        </td>
                        <td>
                                                        <input name="attribute_pa_setting" value="18-k-yellow-gold" type="hidden">
                                                        <button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
                            <input name="variation_id" value="722" type="hidden">
                            <input name="product_id" value="719" type="hidden">
                            <input name="add-to-cart" value="719" type="hidden">


                        </td>


                        </tr>
                            <tr class="product-719 variation-723 wrapper" data-role="product"> 
                  <form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>   
                    <td class="image">
                        <img src="https://localhost/testsite/wp-content/uploads/2016/10/1470935641.png" alt="Custom Key Blades-723" width="150px" height="150px">               </td>
                    <td class="title">
                        <h3>Custom Key Blades</h3><br>
                        <b>18 K White Gold  </b>
                        </td>

                    <td class="note">
                                            <label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER">             </td>   
                    <td class="price">
                        <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,000.00</span></span>                </td>
                    <td class="keyblade">
                        <table>
                            <tbody><tr>
                                <th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td>                        </tr>

                            <tr>
                                <th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td>                        </tr>
                        </tbody></table>

                    </td>



                        <td>
                            <div class="quantity">
        <input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
    </div>
                        </td>
                        <td>
                                                        <input name="attribute_pa_setting" value="18-k-white-gold" type="hidden">
                                                        <button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
                            <input name="variation_id" value="723" type="hidden">
                            <input name="product_id" value="719" type="hidden">
                            <input name="add-to-cart" value="719" type="hidden">


                        </td>


                        </tr>
                            <tr class="product-719 variation-724 wrapper" data-role="product"> 
                  <form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>   
                    <td class="image">
                        <img src="https://localhost/testsite/wp-content/uploads/2016/10/Modern-Iconic-Key-with-Black-Diamond-.png" alt="Custom Key Blades-724" width="150px" height="150px">                </td>
                    <td class="title">
                        <h3>Custom Key Blades</h3><br>
                        <b>18 K Rose Gold  </b>
                        </td>

                    <td class="note">
                                            <label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER">             </td>   
                    <td class="price">
                        <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>950.00</span></span>                </td>
                    <td class="keyblade">
                        <table>
                            <tbody><tr>
                                <th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td>                        </tr>

                            <tr>
                                <th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td>                        </tr>
                        </tbody></table>

                    </td>



                        <td>
                            <div class="quantity">
        <input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
    </div>
                        </td>
                        <td>
                                                        <input name="attribute_pa_setting" value="18-k-rose-gold" type="hidden">
                                                        <button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
                            <input name="variation_id" value="724" type="hidden">
                            <input name="product_id" value="719" type="hidden">
                            <input name="add-to-cart" value="719" type="hidden">


                        </td>


                        </tr>




                </tbody>


                </table>

这是 JQUERY 脚本

    <script src="https://code.jquery.com/jquery-1.11.0.js" integrity="sha256-zgND4db0iXaO7v4CLBIYHGoIIudWI5hRMQrPB20j0Qw=" crossorigin="anonymous"></script>
    <script>
    var quantity = 0;
    $(document).ready(function () {
        $('input.wh-qty').each(function () {
            quantity += parseInt($(this).val());
        });
        $('input[name="quantity"]').val(quantity);

        $('input.wh-qty').on('input', function () {
            quantity = 0;
            $('input.wh-qty').each(function () {
                var amountInfo = parseInt($(this).val());
                amountInfo = (amountInfo) ? amountInfo : 0; 
                quantity += amountInfo;
            });
            $('input[name="quantity"]').val(quantity);
        });
    });
    </script>

【问题讨论】：

标签： javascript php jquery wordpress loops

【解决方案1】：

我认为你可以给你的<tr class="product-<?php...一个<tr data-role="product" class="product-<?ph的属性，然后使用jQuery来获取和设置每一行的值：

$(document).ready(function(){
  $('input.wh-qty').on('input', function () {
    setQuantity();
  });
})
const setQuantity = function(){
  $.each(
    $(`tr[data-role="product"]`), // add role="product" to tr
    function(index,element){
      const $el = $(element);
      const sc = $el.find("input.sc-note.wh-qty").val();
      const kw = $el.find("input.kw-note.wh-qty").val();
      if(sc!=="" || kw!==""){
        $el.find('input[name="quantity"]').val(
          (sc*1)+(kw*1)
        );
      }
    }
  );
};

如果这不起作用，能否请您发布整个 html，这样我们就不需要一起困惑 html 是什么？

【讨论】：

我已经用完整的 HTML 表格更新了 GENERATED HTML CODE: 部分。是否足够，或者我需要发布完整的页面 HTML？本页主要内容仅此表。
是的，代码现在正在运行。但是发生了一个小故障。假设我正在增加 PRODUCT 1 wh-qty，这会增加 PRODUCT 1 数量，但所有其他产品数量都变为 0。
这里是截图link；也可以用主要数量更改价格吗？就像价格是 100 所以当主要数量是 10 价格列将显示 1000 而不是 100？
@shan404 我更新了答案，所以它不应该将总数设置为零。如果你想要总价，你需要知道单件商品的价格。 html中单个商品的价格在哪里？如果您说它在<span class="woocommerce-Price-amount amount"> 中，那么我该如何更改呢？更改后，我不再知道单个商品的价格（至少在没有一大堆不必要的代码的情况下）。
它正在工作。非常非常感谢你帮助我。关闭前； 1) 是否有可能使 sc1/kw1 变为 0 auto 而 kw1/sc1 只是增加？这些字段通常是空白的，所以当我只增加 SC1 时，KW1 保持空白；它们都是必填字段，我通过检查它们是否为空白来验证它们？因此，如果用户尝试添加产品，它不会在页面刷新后验证并给出错误。