Нажмите функцию с классом, чтобы работать исключительно для текущего выбора - PullRequest
Новая
       22

Нажмите функцию с классом, чтобы работать исключительно для текущего выбора

0 голосов
/ 03 июля 2019

У меня возникают некоторые трудности с настройкой функции щелчка, чтобы работать так, как я собираюсь. Когда пользователь нажимает стрелку рядом с именем каталога, subViewBoxExpand должен отображаться только для этого конкретного выбора.

Кто-нибудь видит, что я делаю неправильно? 

$('.arrow').click(function() {
  var i = $(this).next('.subViewBoxExpand'),
    t = $(this).addClass('active');
  i.toggleClass('active', !0).slideToggle(500).find('.subViewBoxExpand').animate({
    opacity: 1
  }, 1500) + t, $('.subViewBoxExpand').not(i, t).slideUp(800).prev().removeClass('active');
  //$('.subViewBoxExpand').toggleClass('active');
});
.subViewBoxExpand {
  display: none;
}

.subViewBoxExpand.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="catalogSubViewBox">
  <span class="catalogSubViewBoxTitle">Catalog A</span><span class="arrow"> ></span>
  <div id="totalProfileViews"></div>
  <div class="subViewBoxExpand">
    <p>You did it!</p>
  </div>
</div>
<div class="catalogSubViewBox">
  <span class="catalogSubViewBoxTitle">Catalog B</span><span class="arrow"> ></span>
  <div id="totalFastViews"></div>
  <div class="subViewBoxExpand">
    <p>You did it!</p>
  </div>
</div>

1 Ответ

1 голос
/ 03 июля 2019
  1. Используйте .closest () и объединитесь с .find () , чтобы получить элемент selected/clicked и соответствующее окно просмотра.

Примечание: окно просмотра не находится рядом с выбранным элементом

образец: $(this).closest('.catalogSubViewBox').find('.subViewBoxExpand')

ОБНОВЛЕНИЕ: Удалить активный класс, который также переключается в представлении 

$('.arrow').click(function() {
  var i = $(this).closest('.catalogSubViewBox').find('.subViewBoxExpand'),
    t = $(this).addClass('active');
  i.slideToggle(500).find('.subViewBoxExpand').animate({
    opacity: 1
  }, 1500) + t, $('.subViewBoxExpand').not(i).slideUp(800).prev().prev().removeClass('active');
  //$('.subViewBoxExpand').toggleClass('active');
});
.subViewBoxExpand {
  display: none;
}

.subViewBoxExpand.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="catalogSubViewBox">
  <span class="catalogSubViewBoxTitle">Catalog A</span><span class="arrow"> ></span>
  <div id="totalProfileViews"></div>
  <div class="subViewBoxExpand">
    <p>You did it!</p>
  </div>
</div>
<div class="catalogSubViewBox">
  <span class="catalogSubViewBoxTitle">Catalog B</span><span class="arrow"> ></span>
  <div id="totalFastViews"></div>
  <div class="subViewBoxExpand">
    <p>You did it!</p>
  </div>
</div>
...