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

Question

我正在使用 Swiper.js slider 。

当幻灯片事件时，我想在幻灯片下方添加两个div作为描述。

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>

当幻灯片处于事件状态时，添加类 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();
  }
});

我向 swiper-slide div 添加了 one 和 two 类，这样我就可以解析幻灯片。

我的代码 employee-details-note div 一直在显示，而 employee-details-text 根本不显示是否有 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;
    }