无法让这个基本的 toggleClass 在 JQuery 中工作

Question

所以我不确定我做错了什么。我试图通过在单击时切换 class 来使按钮看起来好像被按下了。

我快速执行了 JavaScript if 语句以确保 jQuery 已加载。

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.12.3.min.js"></script>
<script>
$("button").click(function(){
  $("button").toggleClass("active-class");
});
</script>
<style type="text/css">
.active-class {
  background-color:red;
}

/* Non-important styles */
button {
  font-size:15px;
  padding:10px;
  background-color:#E8E8E8;
  border:1px solid rgba(0,0,0,0.3);
  border-radius:5px;
  outline:none;
}
</style>
</head>
<body>
<button>Click to toggle!</button>



</body>
</html>

当我点击按钮时，它什么也没做。有什么建议吗？

Answer 1

将 script 标签放在 body 标签结束之前。

$(document).ready(function(){
   $('button').on('click', function(){
      $(this).toggleClass('active-class');
    })
});

Answer 2

将您的 js 移到结束 body 标记之前。或添加文档准备功能：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
  <script>
  $( document ).ready(function() {
    $("button").click(function(){
      $("button").toggleClass("active-class");
    });
  });
  </script>
  <style type="text/css">
  .active-class {
    background-color:red;
  }
  /* Non-important styles */
  button {
    font-size:15px;
    padding:10px;
    background-color:#E8E8E8;
    border:1px solid rgba(0,0,0,0.3);
    border-radius:5px;
    outline:none;
  }
  </style>
</head>
<body>
  <button>Click to toggle!</button>
</body>
</html>

无法让这个基本的 toggleClass 在 JQuery 中工作

Can't get this basic toggleClass to work in JQuery

javascript

jquery

button

toggleclass