Question

所以我不确定我做错了什么。我试图通过在单击一个类时切换按钮来显示一个按钮。

我做了一个快速的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

在身体标记结束之前放置脚本标记。

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

Answer 2

在结束身体标记之前移动你的js。或添加文档就绪功能：

<!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中工作

2 个答案: