Почему открывается 2 блока при нажатии на кнопку с помощью обработчика клик?

Question

[MrFreeman94]

Где я ошибся?

<div class="popup-lb">
      <span class="lb-test pulsating-circle"  id="lbp-1" data-id="1">   
        <div class="popup-lb-item">
        <img class="product-item-inner" src="https://via.placeholder.com/150x100">     
        </div>
        </span>
      </div>  
     
      <div class="popup-lb">
      <span class="lb-test pulsating-circle"  id="lbp-2" data-id="2">
        <div class="popup-lb-item">
         <img class="product-item-inner" src="https://via.placeholder.com/150x100">   
        </div>
        </span>
      </div>

$('.popup-lb-item').hide()
    $('.lb-test').click(function () {
        $(this).toggleClass('minus-lb');
        if ($('.pulsating-circle').hasClass('minus-lb')) {
            $('.popup-lb-item').fadeIn(300);                                 
        }else{
            $('.popup-lb-item').fadeOut(300);
        }
    });

Почему после нажатия на lb-test появляется сразу 2 блока popup-lb-item?

Answer 1

[Spartak (Web-StyleStudio)]

Попробуйте так

$('.lb-test').click(function () {
	$(this).toggleClass('minus-lb');
	if ($(this).hasClass('minus-lb')) {
		$(this).children('.popup-lb-item').fadeIn(300);
	} else {
		$(this).children('.popup-lb-item').fadeOut(300);
	}
});

Comments

[MrFreeman94]

Ооо точно можно через .children() ОМГ!!! Спасибо)

[Spartak (Web-StyleStudio)]

MrFreeman94,
Или такой вариант

$('.lb-test').click(function () {
	$(this).toggleClass('minus-lb');
	$(this).children('.popup-lb-item').slideToggle(300);
});

Answer 2

[BATPYIIIKOB]

Потому, что в вёрстке у тебя их два
<div class="popup-lb-item">