在jquery中检查元素是否具有特定的类不起作用

Checking if an element has a specific class in jquery not works

本文关键字：不起作用 jquery 检查 元素 是否      更新时间：2023-09-26

我被一个非常简单的功能阻止了，该功能以前多次与我一起使用，但现在不起作用。控制台中也没有特定错误。

我正在尝试检查包含.form-content.inactive类的div 是否有特定的类。我正在尝试查找是否有其他类opened.

我的代码如下所述

$(document).ready(function() {
  if($('.form-content.inactive').hasClass('opened')){
     $(".form-content a").click(function(event) {
        alert('has');
     });
  } 
});

单击时不会发出警报。我现在傻了一会儿:p

如果你的div从一开始就没有opened类，你应该这样做。

$(document).ready(function() {
     $(".form-content a").click(function(event) {
         if($('.form-content.inactive').hasClass('opened')){
            alert('has');
        } 
     });
});

否则你的代码可以工作。当你的div在文档准备就绪之前就已经有类opened时，只有这样jQuery才能让你的点击元素订阅到事件中。

$(document).ready(function() {
  if ($('.form-content.inactive').hasClass('opened')) {
    $(".form-content a").click(function(event) {
      alert('has');
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
  <a>Click!</a>
</div>

与其检查opened，不如使用委托：-

$(document).ready(function() {
  $('body').on('click', '.form-content.inactive.opened a', function(event) {
    alert('has');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
  <a>Link</a>
</div>

如果.form-content同时具有类.inactive和.opened，这将触发 a 的单击事件。

如果您坚持使用 hasClass并且有多个.form-content那么您应该使用 this 来获取最接近的.form-content并检查这两个类。

$(".form-content a").click(function(event) {
  var formContent = $(this).closest('.form-content');
  if(formContent.hasClass('inactive') && formContent.hasClass('opened')){
    alert('has');
  } 
});
相关文章：