count++ on minus/plus

[safi.najjar1]

Hello guys

I have a problem with jquery this my code:

var count = $(".count");
$('.minus').on('click', function () {
    if (count.val() > 1)
        count.val(parseInt($(".count").val()) - 1);
});
$('.plus').on('click', function () {
    count.val(parseInt($(".count").val()) + 1);
});

and HTML code:

for first product and other products:

    <td>
        <input type="button" id="minusInCart" class="minus" value="-">
        <input id="quantityInCart" class="count" type="text" name="quantity" value="<?= $cartItem->quantity ?>">
        <input type="button" id="plusInCart" class="plus" value="+">
    </td>

the problem is when i try to press + or - it will count the first product and other products.

I want when I press on + or - to count the product that reference to the same product I'm in

note: this example on my cartItems table

how to do that please help!

[hericles]

If your HTML snippet is the same for all rows then each product has a label with a class of 'count'. Which means in your jQuery all of the labels get incremented as the jQuery is affecting all of then, not just the one beside the button you happened to click. Currently you have no way to inform the jQuery function which label it should be increasing.
You could give each label a unique name and pass that name into the function when you click each button. To do this you'd need to add an onclick to each +/- button which calls the function with the parameter.

[Airshow]

The problem is that count = $(".count") selects all the elements with class="count", not just the one you are interested in whenever a plus/minus button is clicked.

You need for the click handler to sniff out the particular .count element that is a sibling of the particular plus/minus button that was clicked.

Something like this should do it :

$('.minus').on('click', function() {
    var count = $(this).siblings(".count");
    var val = parseInt(count.val());
    if (val > 1)
        count.val(val - 1);
});
$('.plus').on('click', function() {
    var count = $(this).siblings(".count");
    var val = parseInt(count.val());
    count.val(val + 1);
});

Even better, you can delegate to the containing table element, AND handle both plus and minus with a single handler, as follows :

//Assuming the cart has id="cartTable"
$("#cartTable").on('click', '.minus, .plus', function() {
    var $this = $(this),
        $count = $this.siblings(".count"),
        delta = $this.hasClass('plus') ? 1 : -1; 
    $count.val(Math.max(0, parseInt($count.val()) + delta));
});

Not only is that more concice, but it will automatically handle :

• any items already in the cart when this handler is put in place
• any items added to the cart later (ie there's no need to attach individual click handlers to new items after they are added).

So, no worries if your cart is dynamically updated.

If it's not dynamically updated, then still no worries, delegation is a good idea anyway.

[safi.najjar1]

thank you very very much

actually It worked fine with delegation but with that consise one It worked

for me but It increasing the value of count in even way

[safi.najjar1]

It worked perfectly,

sorry I copyied the two solutions :S

thx very much.

[Airshow]

Safi, I didn't offer much of an explanation. See if you can work out how the solution works.

There are maybe four features in the concise solution that need to to be understood.