Javascript Can'；我不能让这个基本的toggleClass在JQuery中工作_Javascript_Jquery_Button_Toggleclass

Javascript Can'；我不能让这个基本的toggleClass在JQuery中工作

javascript jquery button

Javascript Can'；我不能让这个基本的toggleClass在JQuery中工作,javascript,jquery,button,toggleclass,Javascript,Jquery,Button,Toggleclass,所以我不确定我做错了什么。我试图通过在单击某个类时切换该类，使按钮看起来好像被按下了一样我做了一个快速的JavaScript if语句，以确保jQuery已加载代码如下： <!DOCTYPE html> <html> <head> <script src="jquery-1.12.3.min.js"></script> <script> $("button").click(function(){ $("button"

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

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


$（“按钮”）。单击（函数（）{
$（“按钮”）.toggleClass（“活动类”）；
});
.活动课{
背景色：红色；
}
/*非重要风格*/
钮扣{
字体大小：15px；
填充：10px；
背景色：#E8E8E8；
边框：1px实心rgba（0,0,0,0.3）；
边界半径：5px；
大纲：无；
}
点击切换！

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

将脚本标记放在正文标记结束之前

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

将脚本标记放在正文标记结束之前

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

将js移到end 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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“按钮”）.toggleClass（“活动类”）；
});
});
.活动课{
背景色：红色；
}
/*非重要风格*/
钮扣{
字体大小：15px；
填充：10px；
背景色：#E8E8E8；
边框：1px实心rgba（0,0,0,0.3）；
边界半径：5px；
大纲：无；
}
点击切换！

在结束正文标记之前移动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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“按钮”）.toggleClass（“活动类”）；
});
});
.活动课{
背景色：红色；
}
/*非重要风格*/
钮扣{
字体大小：15px；
填充：10px；
背景色：#E8E8E8；
边框：1px实心rgba（0,0,0,0.3）；
边界半径：5px；
大纲：无；
}
点击切换！

当您尝试附加侦听器时，按钮仍然没有加载到DOM树中。当您尝试附加侦听器时，将CSS放在主体中，而不是头部。当您尝试附加侦听器时，按钮仍然没有加载到DOM树中。将CSS放在主体中，而不是头部。谢谢你们两位，这是我第一次使用jQuery，所以我知道现在需要做什么！不客气。别忘了选择答案（在投票下勾选）并投票+1我们的答案…谢谢你们两位，这是我第一次使用jQuery，所以我知道现在需要做什么了！不客气。别忘了选择答案（在投票下勾选）并投票+1我们的答案…将其包装在文档函数中。将其包装在文档函数中。