使用 jQuery 动态添加 类 时如何显示 div

Question

我正在使用 Swiper.js 滑块。

当幻灯片处于 活动状态时 我想在幻灯片下方添加两个 divs 作为说明。

index.html

 <div class="swiper-container about">
  <div class="swiper-wrapper">
    <div class="swiper-slide about one">
      <div class="imgBx">
        <img src="one.jpg">
      </div>
      <div class="employee">
        <h3>Tom<br><span>Founder</span></h3>
      </div>
      <div class="employee-details-text">
        Description
      </div>

      <div class="employee-details-note">
        Description 2
      </div>
    </div>
    <div class="swiper-slide about two">
      <div class="imgBx">
        <img src="two.jpg">
      </div>
      <div class="employee">
        <h3>Ine<br><span>Founder and CEO</span></h3>
      </div>
      <div class="employee-details-text">
        Description
      </div>

      <div class="employee-details-note">
        Description 2
      </div>
    </div>
  </div>
</div>

当幻灯片处于活动状态时 class 添加 swiper-slide-active

<div class="swiper-slide about one swiper-slide-active">

这是我的代码：

$(document).ready(function () {
  if($("div.swiper-slide.one").hasClass('swiper-slide-active')){
    $("employee-details-text, employee-details-note").show();
  }else{
    $("employee-details-text, employee-details-note").hide();
  }
});

我将 one 和 two class 添加到 swiper-slide div 以便我可以解析幻灯片。

我的代码 employee-details-note div 一直在显示，而 employee-details-text 根本不显示 如果幻灯片有 class swiper-slide-active与否。

Answer 1

我认为没有必要使用 JS 来做你想做的事情，这里有一个 CSS 代码可以帮助你。

---

.swiper-slide .employee-details-text, .swiper-slide .employee-details-note{
    display:none;
    }
    .swiper-slide.swiper-slide-active .employee-details-text, .swiper-slide.swiper-slide-active .employee-details-note{
    display:block;
    }