Question

我在制作网站时遇到大麻烦。出于某些原因，无论我做什么，我都无法使javascript工作。是否有一些我因为启用＆＃39;而失踪的东西。此？

例如，我完全复制了一件非常简单的事情。 https://codepen.io/thetallweeks/pen/boinE

在测试文件中，这是：

<html>
<head>
<script>
$("#button").click(function() {
  $('.transform').toggleClass('transform-active');
});
</script>

<style>
.box {
  background-color: #218D9B;
  height: 100px;
  width: 100px;
}

.transform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.transform-active {
  background-color: #45CEE0;
  height: 200px;
  width: 200px;
}


</style>
</head>

<body>
<div class="box transform">
</div>

<input type="button" id="button" value="Click Me"></input>
</body>


</html>

然而，按钮在我的测试文件中没有任何作用。我做错了什么？

Answer 1

$()是用于在DOM中查找元素的jQuery简写。您是否包含jQuery Library？

Answer 2

试试这个

<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$("#button").click(function() {
  $('.transform').toggleClass('transform-active');
});
</script>

<style>
.box {
  background-color: #218D9B;
  height: 100px;
  width: 100px;
}

.transform {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
}

.transform-active {
  background-color: #45CEE0;
  height: 200px;
  width: 200px;
}


</style>
</head>

<body>
<div class="box transform">
</div>

<input type="button" id="button" value="Click Me"></input>
</body>


</html>

这是因为您没有包含Jquery并尝试使用它。

请注意脚本标记顶部的其他脚本标记

Answer 3

除了确保已加载JQuery之外，您还应该在结束正文标记之前加载JQuery代码（脚本标记）或将其包装在文档就绪函数调用中。如果已经加载了JQuery，那么正在发生的事情就是在你附加事件的html元素实际加载之前正在执行JQuery。所以基本上JQuery事件还不能看到你的按钮元素。

$(document).ready(function(){

  $("#button").click(function() {
  $('.transform').toggleClass('transform-active');
});


});

Javascript无法在我的网站上运行

3 个答案: