我试图更改背景颜色,当幻灯片元素具有类(光滑电流)但它在document.ready上根本不起作用时,甚至无法在控制台中显示某些内容。登录()。控制台不显示任何错误。 (.content是.slider-container的父元素。)
这是html代码:
<div class="slider-container">
<div class="single-item">
<div class="slick-slide " id="slide-1" data-slick-index="0" ><h3>1</h3></div>
<div class="slick-slide slide-2" data-slick-index="1" ><h3>2</h3></div>
<div class="slick-slide slide-3" data-slick-index="2" ><h3>3</h3></div>
</div>
</div>
这是jquery:
$(document).ready(function() {
if($("#slide-1").hasClass(".slick-current")){
$('.content').css("background-color", "yellow")
console.log('ggh');
}
});
答案 0 :(得分:1)
使用hasClass时,您应该忽略.
$(document).ready(function() {
if ($("#slide-1").hasClass("slick-current")) {
$('.content').css("background-color", "yellow")
console.log('has class slick-current');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-container">
<div class="single-item">
<div class="slick-slide slick-current" id="slide-1" data-slick-index="0">
<h3>1</h3>
</div>
<div class="slick-slide slide-2" data-slick-index="1">
<h3>2</h3>
</div>
<div class="slick-slide slide-3" data-slick-index="2">
<h3>3</h3>
</div>
</div>
</div>
答案 1 :(得分:0)
删除&#34;。&#34;在hasClass括号中它应该工作:) 以下是hasClass https://api.jquery.com/hasclass/的文档 点击这里如何正确使用它。
答案 2 :(得分:0)
删除.
中的hasClass
。
$(document).ready(function() {
if ($("#slide-1").hasClass("slick-current")) {
$('.content').css("background-color", "yellow")
console.log('ggh');
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="slider-container">
<div class="single-item">
<div class="slick-current" id="slide-1" data-slick-index="0">
<h3>1</h3>
</div>
<div class="slick-slide slide-2" data-slick-index="1">
<h3>2</h3>
</div>
<div class="slick-slide slide-3" data-slick-index="2">
<h3>3</h3>
</div>
</div>
</div>
&#13;