0

我在购物车中有一个 div，我正在尝试更改项目数量以匹配屏幕左侧的项目数量。当您按下项目旁边的向上和向下按钮时，数字会相应增加。但是我无法访问购物车中的相应 div。现在购物车中的数字卡在 0 上。我认为代码的第 7 行是我的问题所在。

这是一个 jsfiddle：http: //jsfiddle.net/richcoy/MHMVC/

HTML：

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Number Updater</title>
 <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="body_container">
<div id="product_container">
<div id="product_item_one" class="product_box">
    <div class="item_name">Item One</div>
    <img src="http://placehold.it/90x80">    
    <div class="product">0</div>
    <button class="up">Up</button>
    <button class="down">Down</button>
</div>

<div id="product_item_two" class="product_box">
    <div class="item_name">Item Two</div>
    <img src="http://placehold.it/90x80">    
    <div class="product">0</div>
    <button class="up">Up</button>
    <button class="down">Down</button>
</div>

<div id="product_item_three" class="product_box">
    <div class="item_name">Item Three</div>
    <img src="http://placehold.it/90x80">        
    <div class="product">0</div>
    <button class="up">Up</button>
    <button class="down">Down</button>
</div>

<div id="product_item_four" class="product_box">
    <div class="item_name">Item Four</div>
    <img src="http://placehold.it/90x80">    
    <div class="product">0</div>
    <button class="up">Up</button>
    <button class="down">Down</button>
</div>

<div id="product_item_five" class="product_box">
    <div class="item_name">Item Five</div>
    <img src="http://placehold.it/90x80">        
    <div class="product">0</div>
    <button class="up">Up</button>
    <button class="down">Down</button>
</div>
</div>

<div id="cart_container">
    <h3>Shopping Cart</h3>
    <div id="cart_item_one" class="cart_product">
            <div class="item_name">Item One</div>
            <div class="cart_product_number">0</div>
    </div>
    <div id="cart_item_two" class="cart_product">
            <div class="item_name">Item Two</div>
            <div class="cart_product_number">0</div>
    </div>
    <div id="cart_item_three" class="cart_product">
            <div class="item_name">Item Three</div>
            <div class="cart_product_number">0</div>
    </div>
    <div id="cart_item_four" class="cart_product">
            <div class="item_name">Item Four</div>
            <div class="cart_product_number">0</div>
    </div>
    <div id="cart_item_five" class="cart_product">
            <div class="item_name">Item Five</div>
            <div class="cart_product_number">0</div>
    </div>
    </div>
</div><!-- end #body_container -->
</body>
</html>​

JavaScript：

$(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();
        $('.cart_product').eq($(this).closest('.cart_product_number').text(num));
    });

    $('.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) {
            $('.cart_product').eq($(this).closest('.product_box').index()).hide();
        } else {
            $('.cart_product').eq($(this).closest('.product_box').index()).show();
        }
    });
});

​</p>

4

3 回答 3

1

这是我的解决方案：

$(document).ready(function() {
    var num;
    $('.up').click(function() {
        num = parseInt($(this).siblings('.product').text());
        $(this).prevAll('.product').text(num + 1);    
        var box = $('.cart_product').eq($(this).closest('.product_box').index());
        box.show();
        box.children(".cart_product_number").text(num + 1);
    });

希望这可以帮助

于 2012-07-21T18:52:53.187 回答
0

你指出我们的路线对我来说不太有意义。你有：

$('.cart_product').eq($(this).closest('.cart_product_number').text(num));

打破它，你正在做一个eq()：

$(this).closest('.cart_product_number').text(num)

这是设置文本.cart_product_num然后返回该对象，然后您将其提供给.eq()该对象，该对象需要一个整数，而不是 jQuery 对象。所以这行代码一直都是错误的。如果你解释你想用那条线完成什么，我们可能会更具体地提供帮助。

于 2012-07-21T18:53:04.723 回答
0 
$(function() {
    $('.up, .down').on('click', function() {
        var productElem = $(this).siblings('.product'),
            dir = $(this).is('.down'),
            num = parseInt(productElem.text());
        if (num==1 && dir) {
            productElem.text('0');
            $('.cart_product').eq($(this).closest('.product_box').index()).hide();
        }else{
            productElem.text(num + (dir?-1:+1));
            $('.cart_product').eq($(this).closest('.product_box').index()).show()
                              .find('.cart_product_number').text(num + (dir?-1:+1));
        }
    });
});

小提琴

于 2012-07-21T18:57:38.970 回答