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')})
});