Question

I’m working on a shopping cart for a client. We have up and down arrows next to product images to select the amount of an item you want to purchase. I’m trying to get this to automatically update the shopping cart also. So any item that has a value of more than one will automatically appear in the cart.

I have the up and down buttons working for each product but when I add in the code for the If statement it breaks everything. I’m also not sure I’m doing this properly because I would need an If statement for each product and there could be 70 products in the store.

Is there a way to use a variable in the If statement to get the matching cart div and make it show?

Here is a jsfiddle http://jsfiddle.net/richcoy/7XnXF/

Answer 1

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/