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

Question

我正在使用Swiper.js滑块。

当幻灯片处于活动状态时，我想在幻灯片下面添加两个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();
  }
});

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

随着代码，我有qazxsw poi div一直显示和qazxsw poi没有显示任何没有米，如果幻灯片有类employee-details-note或没有。

Answer 1

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

---

employee-details-text