时间戳

首页 > 解决方案 > JS 在应该这样做时不删除类

javascript - JS 在应该这样做时不删除类

问题描述

我有一个滑块，第一张幻灯片有第一张幻灯片。当我在滑块中时，它会自动添加活动类。我希望如果这张幻灯片也有活动的类和第一张幻灯片，那么刷卡器的高度将为 100vh。

当我转到下一张幻灯片时，滑块不会有第一张幻灯片，所以我希望滑动高度是自动的。

我正在尝试这样做，但它不应用 height: auto 当我转到第二张幻灯片时......它不起作用：

if ($('.slider').hasClass('first-slide', 'active')) {
  $('.swiper').css('height', '100vh')
} else {
  $('.swiper').css('height', 'auto')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper">
  <div class=" swiper-wrapper ">
    <div class="slider ">
      <!-- I only put 1 slider but you understand is more than one -->
    </div>
  </div>
</div>

标签： javascriptjqueryswiper

解决方案

首先，文档显示 hasClass 采用单个 class，而不是列表。

其次，如果您有两个.sliders，$('.slider').hasClass(...)将始终只查询第一个。请参阅获取同一类的所有元素的outerHeight之和

我认为您想在每次幻灯片更改后调用以下代码，它会查找活动的第一张幻灯片并根据查询是否返回任何结果来执行某些操作。

const activeFirstSlide = $('.slider.first-slide.active');
if (activeFirstSlide.length) {
  // Found an element
  $('.swiper').css('height', '100vh')
}
else {
  // No active first-slide 
  $('.swiper').css('height', 'auto')
}

推荐阅读