Hello. Faced a problem. There is a mini-card product on the main, I want to add a choice for quick order, how many pieces to order.
I do this as follows:

$('.count-goods').hide(); $('.counting').click(function(){ $(this).siblings('.count-goods').show(); }); $('.count-goods span').click(function(){ var text, text_rep; text = $(this).text(); text_rep = $('.counting').text(); $('.counting').parent('.btn-count').text(text); $(this).text(text_rep); });

I am a beginner, and therefore the code is very primitive. Actually, by clicking on the first one, I open a window with a selection of elements that I hid before, and then I want the text to be swapped with the main window when I click on an element of this window. That is, it initially costs 1, I click on one, and a window with a choice of 2, 3, 4 is pushed. When you click on 3, it goes to place 1, and 1 goes to place 3.

But something I can not understand how to pull out exactly this window. My code is not working. :(

Here is my HTML card code:

  <figure> <img src="images/1.png"/> <figcaption> <span class="special">СПЕЦИАЛЬНОЕ<br />ПРЕДЛОЖЕНИЕ</span> <span class="new">NEW</span> <span class="color"><span class="w"></span>Выбрать<br /> цвет</span> <span class="color_select"><span class="w"></span><span class="grey"></span><span class="blue"></span></span> <a href="#" class="title">Свинг-машина (массажер раскачивающийся) DS-098</a> <div class="price"><b>690 руб.</b> <del>790 руб.</del></div> <span class="btn btn-count counting">1</span> <div class="btn-group count-goods"> <span class="btn btn-count">2</span> <span class="btn btn-count">3</span> </div> <span class="btn btn-buy">Купить</span> <div class="btn-group btn-buy-big"> <a href="#" class="btn">В кредит <span>600 руб./мес</span></a> <a href="#" class="btn">Купить в 1 клик</a> <a href="#" class="btn">Добавить в корзину</a> </div> </figcaption> </figure>

There are more than 8 such cards on the page, and it is necessary that the whole action take place in the card where the clicks occurred.

I ask for help, I will be very grateful to you.

1 answer 1

Try this:

 $('.count-goods').hide(); $('.counting').click(function(){ $(this).siblings('.count-goods').show(); }); $('.count-goods span').click(function(){ var text, text_rep, cardCounting = $(this).parents('figcaption').find('.counting'); text = $(this).text(); text_rep = cardCounting.text(); cardCounting.text(text) $(this).text(text_rep); });

This should work, but it would be necessary to work with sorting in ascending order, but somehow it doesn’t really work out http://jsfiddle.net/17bz6jh0/