Question

我试图更改背景颜色，当幻灯片元素具有类（光滑电流）但它在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');
    }
});

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

删除＆＃34;。＆＃34;在hasClass括号中它应该工作:) 以下是hasClass https://api.jquery.com/hasclass/的文档点击这里如何正确使用它。

Answer 3

删除.中的hasClass。

＆＃13;

$(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;

如果hasClass不在document.ready上工作

3 个答案: