There is a basket of goods, it is necessary that in front of each product, depending on its chosen quantity, the amount is recalculated. The change in quantity is realized, but the calculation is not made, the script counts and changes the price for all the goods at once (if there are a lot of them in the basket).

PS In short: input counter * input price = span sum .

Js

 $(document).ready(function() { $('.down').click(function () { var parent = $(this).parent().parent(); var $input = $(this).parent().find('input'); var countn = parseInt($input.val()) - 1; var count = parseInt($input.val()) - 1+' шт.'; countn = countn < 1 ? 1 : count; $input.val(countn); $input.change(); return false; }); $('.up').click(function () { var $input = $(this).parent().find('input'); $input.val(parseInt($input.val()) + 1+' шт.'); $input.change(); return false; }); });

HTML

 <div class="goods"> <div class="name">Название товара</div> <div class="goods-count"> <span class="amount"> <span class="down">-</span> <input type="text" class="counter" value="1 шт." /> <input type="hidden" class="price" value="5000" /> <span class="up">+</span> </span> </div> <div class="goods-price"><span class="sum">5000</span> руб.</div> </div>

    2 answers 2

    If I were you, I would do a little differently.

    1. Would hang up onclick on the container with the goods.
    2. I would look at which item was clicked.
    3. Depending on it would take action.
    4. All data associated with the pieces and the price I would store in the data-attributes
    5. Always write the second argument to parseInt()

    Here is a working full example.

     $('.goods').on('click', function(evt) { var elem = evt.target; var container = evt.currentTarget; var input = container.getElementsByClassName('counter')[0]; var count = parseInt(input.getAttribute('data-count'), 10); if (elem.classList.contains('down')) { count = count == 1 ? count : (count - 1); } else if (elem.classList.contains('up')){ count += 1; } input.setAttribute('data-count', count); });

    What can be improved in it?

    1. Using jQuery in all of this code is not difficult to change, and at the same time you will understand how it works.
    2. jQuery able to filter the elements causing the event and ignore others by the selector. The second argument of the on() function is selector
    • Thank you very much! - dikardRus
    • and how can you calculate the total amount of goods in the <span class="itog">0 р.</span> block, for example? - dikardRus
    • @dikardRus, on this site is taken, asking questions, show what has been done. In the event handler, you need to add an action, for example, $('.goods-price').each() , which will go through all the containers with prices and calculate their sum. - Rolandius

    forgot to add it in html, between tags

     <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head>

    otherwise it will not work

    • one
      Please explain what you have forgotten, between which tags? - 0xdb