-1

我正在为客户制作购物车。我们在产品图片旁边有向上和向下箭头来选择您要购买的商品数量。我也试图让它自动更新购物车。因此，任何价值超过 1 的商品都会自动出现在购物车中。

我有适用于每个产品的向上和向下按钮，但是当我为 If 语句添加代码时，它会破坏一切。我也不确定我是否正确执行此操作，因为我需要为每个产品提供一个 If 语句，并且商店中可能有 70 种产品。

有没有办法在 If 语句中使用变量来获取匹配的购物车 div 并使其显示？

这是一个 jsfiddle http://jsfiddle.net/richcoy/7XnXF/

4

3 回答 3

2

I think this is what you're looking for. You can use eq() to get a certain index and index to get the current index. Since you structured your .cart_product div according to your other div you can just get the current index of the clicked div and use that to show/hide the corresponding div

$(document).ready(function() {
    var num;
    $('.up').click(function() {
        num = parseInt($(this).siblings('.product').text());
        $(this).prevAll('.product').text(num + 1);        
        $('.cart_product').eq($(this).closest('.product_box').index()).show();// <-- on up click you will only ever show a product

    });

    $('.down').click(function() {
        num = parseInt($(this).siblings('.product').text());
        if (num > 0) {
        $(this).siblings('.product').text(num - 1);
        }

        if (parseInt($(this).siblings('.product').text()) == 0) { <-- check if current val in div is == 0
            $('.cart_product').eq($(this).closest('.product_box').index()).hide(); <-- if it is the hide the .cart_product div with the same index as the current "div"
        } else {
            $('.cart_product').eq($(this).closest('.product_box').index()).show();
        }
    });
});​

http://jsfiddle.net/7XnXF/12/

于 2012-07-21T13:09:43.427 回答
0

试试这个代码：

 $(document).ready(function() {
    var num;
    $('.up').click(function() {
          num = parseInt($(this).prevAll('.product').text());
          $(this).prevAll('.product').text(num+1);
        });

    $('.down').click(function() {
          num = parseInt($(this).prevAll('.product').text());
          if(num>0){
          $(this).prevAll('.product').text(num-1);
          };
        });

        // Uncommenting these breaks everything
        if ($('#product_item_one').nextAll('.product').text(num > 0)){
            $('#cart_item_one').show();
        };

        if ($('#product_item_two').nextAll('.product').text(num > 0)){
            $('#cart_item_two').show();
        };

        if ($('#product_item_one').nextAll('.product').text(num <= 0)){
            $('#cart_item_one').hide();
        };

        if ($('#product_item_two').nextAll('.product').text(num <= 0)){
            $('#cart_item_two').hide();
        };

});​
于 2012-07-21T11:44:51.553 回答
0

试试这个代码；

 $(document).ready(function() {
    var num;
     var $flag = 0;
     $('#cart_container').hide();
    $('.up').click(function() {
        $flag++;
          num = parseInt($(this).prevAll('.product').text());
          $(this).prevAll('.product').text(num+1);
          $('#cart_container').show();
        });

    $('.down').click(function() {
        $flag--;
          num = parseInt($(this).prevAll('.product').text());
          if(num>0){
          $(this).prevAll('.product').text(num-1);
          };
        if($flag < 1){
        $('#cart_container').hide();
        }
        });

        // Uncommenting these breaks everything
        if ($('#product_item_one').nextAll('.product').text(num > 0)){
            $('#cart_item_one').show();
        };

        if ($('#product_item_two').nextAll('.product').text(num > 0)){
            $('#cart_item_two').show();
        };

});

这是小提琴。

希望这可以帮助...:)

于 2012-07-21T13:00:16.347 回答