jQuery-.removeClass不起作用

Question

我有一個按鈕<button id="subs1">test</button>和一個div

<div class="subsystem subhide">
  <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3>
  <p>Lorem</p>
</div>

在css文件中，類.subhide定義為

.subhide {
 display: none;
}

而我想開始工作的jQuery代碼是

jQuery('#subs1').on('click', function(){
jQuery('.subsystem').removeClass('subhide');
});

當單擊按鈕時什么也沒發生，那是為什么？

提前致謝！

Answer 1

問題是jQuery('#subs1')找到具有該ID的元素並將其綁定。 如果在進行綁定時元素沒有id，則將不處理事件。

附上DOM准備就緒

要解決此問題，請將代碼包裝on document ready ，這樣，僅當dom（文檔）准備好時，您的代碼才會執行​​。

在文檔“就緒”之前，無法安全地操縱頁面。 jQuery為您檢測到這種就緒狀態。 $( document ).ready()內包含的代碼僅在頁面Document Object Model（DOM）准備好執行JavaScript代碼后才能運行。

更好的方法

另一方面，如果您的按鈕是動態添加的，則當事件監聽器要綁定時，按鈕將不存在，因此代碼實際上將不執行任何操作。 要解決此問題，請將您的代碼更改為以下內容：

jQuery(document.body).on('click', '#subs1', function() {
    jQuery('.subsystem').removeClass('subhide');
});

此事件將附加到DOM樹中始終存在的document.body 。 現在，單擊主體時，無論按鈕連接到DOM的時間如何，事件都將傳播到#subs1 。

工作片段

這是一個工作示例：

 $( document ).ready(function() { jQuery(document.body).on('click', '#subs1', function() { jQuery('.subsystem').removeClass('subhide'); }); jQuery(document.body).on('click', '#subs2', function() { jQuery('.subsystem').addClass('subhide'); }); }); 

 .subhide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="subs1">Unhide</button> <button id="subs2">hide</button> <div class="subsystem subhide"> <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3> <p>Lorem</p> </div> 

Answer 2

 jQuery('#subs1').on('click', function(){ jQuery('.subsystem').removeClass('subhide'); }); jQuery('#toggle').on('click', function(){ jQuery('.subsystem').toggle('subhide'); }); 

 .subhide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="subsystem subhide"> <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3> <p>Lorem</p> </div> <button id="subs1">Button</button> <button id="toggle">Toggle Button</button> 

您需要在課外定義按鈕

希望有幫助！

Answer 3

試試吧：

    $( document ).ready(function() {
      $('#subs1').on('click', function(){
          $('body').find('.subhide').removeClass('subhide');
      });
   });

如果您使用的是chrome，請清除瀏覽器緩存。

Answer 4

在樣式表中，將其更改為：

.subsystem.subhide {
display: none;
}

.subsystem {
display: anything;
}

它應該工作

Answer 5

我不確定為什么，但是此片段有效：

jQuery( document ).ready(function() {
 jQuery('#subs1')
  .click(function(){
  jQuery('body').find('.subsystem').addClass('subhide')})
});