如果 hasClass 不在 document.ready 上工作

Question

我正在尝试更改背景颜色，当幻灯片元素具有类 (slick-current) 但它在 document.ready 上根本不起作用，甚至无法在 console.log() 中显示某些内容时。 控制台不显示任何错误。 （.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');
    }
});

Answer 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>

Answer 2

消除 ”。” 在 hasClass 括号中，它应该可以工作:) 这里是 hasClass 的文档https://api.jquery.com/hasclass/在此处检查如何正确使用它。

Answer 3

删除. 在hasClass 。

 $(document).ready(function() { if ($("#slide-1").hasClass("slick-current")) { $('.content').css("background-color", "yellow") console.log('ggh'); } });

 <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>