檢查元素在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');
  } 

});