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

Question

我被阻止了一个非常简单的功能，它与我一起工作很多次但现在不能正常工作。控制台中没有特定的错误。

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

我的代码如下

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

点击没有给出警报。我现在傻了一段时间：p

Answer 1

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

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

否则你的代码可以正常工作..当你的div已经在文档准备就绪之前已经opened了类时，只有jQuery能够将你的click元素订阅到事件中。

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

Answer 2

而不是检查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> 

这将触发click事件的a ，如果.form-content有两类.inactive和.opened 。

如果您坚持使用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');
  } 

});