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 
$(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 に答える
0

あなたが私たちに指摘した行は、私にはあまり意味がありません. あなたが持っている：

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

それを分解すると、あなたはこれについてやっていますeq()：

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

これは、テキストを設定してから、jQuery オブジェクトではなく整数を期待する.cart_product_numオブジェクトを返します。.eq()したがって、このコード行は全体的に間違っています。その行で何を達成しようとしていたかを説明していただければ、より具体的にお役に立てるかもしれません。

于 2012-07-21T18:53:04.723 に答える