woocommerce 购物车无法与 jquery 一起正常工作

Question

这是我第一次使用 woocommerce，当我添加超过 1 个产品并增加或减少任何产品时，我的购物车页面出现问题，这会增加所有产品的数量。

例如：我添加了数量为 2 的产品 a 和数量为 7 的产品 b

如果我将产品 b 增加到 8，那么产品 a 的数量也会增加到 8

代码：

<script>
jQuery('.plus').on('click',function(e){
var val = parseInt(jQuery('input[title="Qty"]').val());

jQuery('input[title="Qty"]').val( val+1 );
});

jQuery('.minus').on('click',function(e){
var val = parseInt(jQuery('input[title="Qty"]').val());
if(val !== 0){

jQuery('input[title="Qty"]').val( val-1 );
} });
</script>

即使我增加或减少产品，价格也保持不变

HTML 输出：goo.gl/h3w4IQ

实际购物车页面：goo.gl/9ynStK

请告诉我为什么这个 jQuery 代码不起作用，以及如何根据产品数量增加/降低价格。

Answer 1

在您的 jQuery 代码中，您选择了所有的 DOM input，同时进行加减运算。您实际上需要一个特定的选择器来仅更改相邻输入的值。请用这个替换您的代码。我已经测试过了，它可以工作。

jQuery(document).ready(function($) {
    // Attach event on plus
    // We delegate the event to document
    // So that even if there are 100 of plus buttons
    // It would not slow down the page
    $(document).on( 'click', '.plus', function(e) {
        // Get the right element
        var elem = $(this).prev('.qty'),
        // and its value
        val = parseInt( elem.val() );
        // Sanitize the value
        if ( isNaN( val ) ) {
            val = 0;
        }
        if ( val < 0 ) {
            val = 0;
        }
        // Now increase it
        elem.val( ++val ).trigger('change');
    } );

    // Similar appraoch for the minus button
    $(document).on( 'click', '.minus', function(e) {
        // Get the right element
        var elem = $(this).next('.qty'),
        val = parseInt( elem.val() );
        // Sanitize the value
        if ( isNaN( val ) ) {
            val = 0;
        }
        // decrease the value
        val = val - 1;
        // but not a negative
        if ( val < 0 ) {
            val = 0;
        }
        // Set it
        elem.val( val ).trigger('change');
    } );
});