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