jQuery each only recognizing first element that was clicked

Question

My problem is fairly basic (at least, for you guys), but I can't seem to get it work.

So I have products and an add to cart button. I need it so that whenever I add a product already in the cart, it will not add it in a new line, but rather, just increase the count.

Somehow, it only recognizes the first product that was clicked. Here is my fiddle:

http://jsfiddle.net/78wUa/

var initial = 0;
jQuery('.add-to-cart').live('click', function() {
    jQuery('.no-prods').fadeOut();
    jQuery('.subtotal').fadeIn();

    var dataOwner = jQuery(this).parent().closest('div').attr('data-owner');
    var dataClass = jQuery(this).parent().closest('div').attr('data-owner');
    dataClass = '.' + dataClass;

    var count = '<span class="prod-count ' + dataOwner + '">' + 1 + '</span>';

    var price = jQuery(this).parent().closest('div').attr('data-price');
    price = 'jQuery<span class="prod-price">' + price + '</span>';

    if(initial == 0) {
        var p_name = jQuery('.span9 ' + dataClass + ' h3').clone();
        var p_name_and_quantity = jQuery(p_name).after(' ' + count + ' x ' + price);
        jQuery('.my-cart').append(p_name_and_quantity);
        initial = 1;
        //get_subtotal();
    } else {
        get_products(dataClass, count, price);
    }
});

function get_products(dataClass, count, price) {
    jQuery('.my-cart h3').each(function() {
        var c_name = jQuery(this).html();
        var product = jQuery('.span9 ' + dataClass + ' h3').html();
        if(c_name == product) {
            //get_count(count, dataClass);
            return false;
        } else {
            var this_p_name = jQuery('.span9 ' + dataClass + ' h3').clone();
            var this_p_name_and_quantity = jQuery(this_p_name).after(' ' + count + ' x ' + price);
            jQuery('.my-cart').append(this_p_name_and_quantity);
            get_subtotal();
        }
    });

    return false;
}

First of all - classes have to start with a letter, so class "0001" is likely not to work correctly — Asped
– Asped, Commented Mar 12, 2014 at 10:25
Lian, it's a concern as of this moment. That's why I commented it out. Asped, okay thanks. I will change them. — user2772219
– user2772219, Commented Mar 12, 2014 at 11:00
@user2772219, what I meant was that it isn't defined, therefore I cannot tell how it is supposed to work. — Lian
– Lian, Commented Mar 12, 2014 at 11:16

Sujata Chanda · Accepted Answer · 2014-03-12 10:33:34Z

1

Well I have updated your code and made it in my own way:- Fiddle

function get_products(el) {
    if(products.indexOf($(el).attr('data-product')) == -1){
         products.push($(el).attr('data-product'))
      $('.my-cart').append('<h3 class="product">' +             $(el).parent().find("h3").html() + '</h3>');
    }
    subTotal += +$(el).parent().attr("data-price");
    $(".subtotal").html("Subtotal: $" + subTotal);
}

Hope this is what you are looking for.

answered Mar 12, 2014 at 10:33

Sujata Chanda

3,3952 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery each only recognizing first element that was clicked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related