我有一个滑块，第一个滑块有class first-slide.当我在滑块中时，它会自动添加class active.我想如果这个滑块有class active和first-slide，那么这个滑块会有100vh的高度。我想，如果这个滑块也有类活动和第一滑块，那么滑动器的高度将为100vh。
当我进入下一个滑块时，滑块不会有类第一滑块，所以我想让滑动条的高度是自动的。
我试图这样做，但它不应用高度：自动当我去第二个幻灯片......它不工作。
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>首先 文档显示，hasClass需要一个单一的类，而不是列表。
其次，如果你有两个 .sliders, $('.slider').hasClass(...) 将永远只查询第一个。请看 获取同一类中所有元素的外高之和。
我想你应该在每次更换幻灯片后调用下面的代码，它寻找活动的第一张幻灯片，并根据查询是否返回任何结果来做一些事情。
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')
}
感谢 @Juan Mendes 指出了这个范围。你上面的代码可能无法工作，因为 有类 只需要一个参数。与其使用if条件来决定何时切换类，我建议使用 .on 因为你要做一个滑块，这里有一个很好的例子，我们假设你有三个文件。main.js、main.css、main.html]，在这个目录下，有多张图片。
$(document).ready(function(){
$('.next').on('click', function(){
var currentImg = $('.active');
var nextImg = currentImg.next();
if(nextImg.length){
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index', 10);
}
});
$('.prev').on('click', function(){
var currentImg = $('.active');
var prevImg = currentImg.prev();
if(prevImg.length){
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index', 10);
}
});
});body
{
font-family: "Arial", sans-serif;
font-size: 14px;
color: #fff;
background: #333;
}
a
{
colo: #fff;
text-decoration: none;
}
h1
{
text-align: center;
}
.container
{
width: 540;
margin: 40px auto;
overflow: auto;
}
.slider-inner
{
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 1px;
}
.slider-inner img
{
display: none;
width: 500px;
height: 300px;
}
.slider-inner img.active
{
display: inline-block;
}
.prev, .next
{
float: left;
margin-top: 130px;
cursor: pointer;
}
.prev
{
position: relative;
margin-right: -45px;
z-index: 100;
}
.next
{
position: relative;
margin-left: -45px;
z-index: 100;
}<!doctype html>
<html lang="en">
<head>
{% load static %}
<meta charset="UTF-8">
<title>JQSlider</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<script src="main.js">
</script>
</head>
<body>
<div class="container">
<h1>JQSlider</h1>
<div class="slider-outer">
<img src="arrow-left.png" class="prev" alt="Prev">
<div class="slider-inner">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
<img src="blog/arrow-right.png" class="next" alt="Next">
</div>
</div>
</body>
</html>在上面的JS代码中，当你点击右边的箭头时，"活动 "类会从现在移动到下一个（z-index会被设置为一个较大的数字）。'z-指数'属性决定了显示的优先级，因此当我们增加它时，图片就会显示出来。
不过，我个人更喜欢使用Van JS addEventListener，这在滑块制作中也是很有帮助的，下面是一个切换类的代码例子。
当你点击一个带有.box类的，就会触发功能。请搜索EventListeners，有很多，比如滚动、鼠标下移、鼠标上移、鼠标移动、点击等。
这里有一个简单的例子，当你点击红色的盒子，它就会变成蓝色的。
const box = document.querySelector('.box');
box.addEventListener('click', () => {
box.classList.remove('box');
box.classList.add('new_box');
});.box {
border: 1px solid;
background-color: red;
width: 100px;
height: 100px;
margin: 50px;
cursor: pointer;
}
.new_box {
border: 1px solid;
background-color: blue;
width: 100px;
height: 100px;
margin: 50px;
}<div class='box'></div>