CODEWITHSUNDEEP
jquery
Rich Coy
Rich Coy

Reputation: 545

Using jQuery .eq to update value

I have a div in a shopping cart that I'm trying to alter the number of items to match the number of items on the left side of the screen. As you press the up and down buttons next to an item the number increments appropriately. However I'm having difficulty accessing the corresponding div in the cart. Right now the number in the cart is stuck on 0. Line 7 of the code is where my problem is I believe.

Here is a 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();
        }
    });
});

​

Upvotes: 0

Views: 277

Answers (3)

adeneo
adeneo

Reputation: 318302

$(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));
        }
    });
});

FIDDLE

Upvotes: 0

jfriend00
jfriend00

Reputation: 707696

The line you pointed us to isn't quite making sense to me. You have:

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

Breaking that down, you're doing an eq() on this:

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

which is setting the text of .cart_product_num and then returning that object which you then feed to .eq() which expects an integer, not a jQuery object. So this line of code is just wrong all the way around. If you explain what you were trying to accomplish with that line, we could probably help more specifically.

Upvotes: 0

Simon
Simon

Reputation: 415

here's my solution:

$(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);
    });

hope this helps

Upvotes: 1

Related Questions