javascript - Swiper JQuery if 语句涉及 .hasClass 和 .toggleClass

Question

不用写背景故事小说，使用Swiper ，我试图在 HTML 元素上调用 .toggleClass，每当我的滑动器幻灯片之一具有 swiper-slide-active 类时。这样我就可以在单张幻灯片上显示文本，而不是同时在所有幻灯片上显示。

这是我所描述内容的视觉效果:studioyonis.com — 如果您单击底部的标题以显示元素信息，然后拖动 RTL，您会注意到第二个元素的元素信息也显示了一小段时间。由于我有一些其他代码，它(正确地)消失了，但我希望它根本不出现(直到我单击该幻灯片上的标题)。

我一直在尝试使用此 if 语句来挑出事件幻灯片并帮助设置后续的点击功能，但它不起作用，我终究无法弄清楚。出于某种原因，JQuery 能否在它发生时看不到 swiper-slide-active？

if ($('.swiper-slide').hasClass('swiper-slide-active')) {
  $('.overlay-caption', this).toggleClass('overlay-caption-active');
  $('.overlay-caption-box', this).toggleClass('overlay-caption-box-active');
};

这是我的 HTML 结构的示例。大约有 7 种不同的幻灯片，都带有 overlay-caption 和 overlay-caption-box 类。

<div class=“swiper-slide”>
  <div class=“caption-box information-00”>
    <a class=“caption links”>
      Text Text Text Text Text Text
    </a>
    <div class=“overlay-caption-box”>
    </div>
  </div>
  <div class=“overlay-caption”>
    <div class=“project-information”>
      Text Text Text Text Text Text Text Text Text Text Text Text
    </div>
  </div>
</div>

希望这是有道理的!今天在这个网站上工作了 10-12 个小时，直到深夜才意识到这个问题。

干杯!

Answer 1

我没有更改显示，而是在元素信息可见时锁定滑动到不同的幻灯片。这样用户就不知道所有的字幕都打开了，因为他/她无法滚动到它们。这迫使用户放慢速度查看每个元素，而不是快速浏览。由于它是一个投资组合网站，在这种情况下也许这是一件好事。