Question

所以我遇到了这个问题。 jQuery的hasClass（）无法正常工作。当我单击文本时，它应该给它一个类（确实如此），但它不会检查它是否具有该类？

有人可以帮我吗？

有我的代码！

$(document).ready(function() {
    
    
    $('#example').on('click', function() {
        $(this).addClass("redText");
    });
    
    if ( $('#example').hasClass("redText") ) {
        $('#example').addClass("bigText");
    }
    
    
});

.redText{
  color: red;
}
.bigText{
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="example">Hey</div>

Answer 1

单击div时，您仅添加redText类。当if运行时，该类尚未添加。

您需要将if移到您的点击功能中，或完全删除该点击功能。

Answer 2

我认为您可能想这样做，但是我不确定；

$(document).ready(function() {
  $('#example').on('click', function() {
    if ( $('#example').hasClass("redText") ) {
      $('#example').addClass("bigText");
    }
    else{
      $(this).addClass("redText");
    }
});

这是一个完全的猜测，能否请您解释一下您要更详细地实现的目标。

Answer 3

页面加载时，您只进行一次if测试。您希望在元素被单击时进行测试，并且为了显示这一点，我将addClass更改为toggleClass，以便您可以继续单击。

$(document).ready(function() {
  $('#example').on('click', function() {
    $(this).toggleClass("redText");
   
   if ( $('#example').hasClass("redText") ) {
     $('#example').addClass("bigText");
   }
  });
});

.redText{
  color: red;
}
.bigText{
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="example">Hey</div>

Answer 4

您要执行的操作可以通过如下一条语句来实现：

  $('#example').on('click', function() {
    $(this).addClass("redText bigText");
  });

您的代码无法正常工作的原因是：在加载文档时，首次单击侦听器被注册。之后执行if()语句，该语句对所有redText类元素进行查找，但没有找到任何元素，因此没有添加bigText类。它不是您要实现的LIVE侦听器。

jQuery-对hasClass（）不起作用

4 个答案: