Javascript Can'；t加载jQuery代码_Javascript_Jquery_Html_Css

Javascript Can'；t加载jQuery代码

javascript jquery html css

Javascript Can'；t加载jQuery代码,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我是web开发的绝对初学者。我有一个html、css和javascript文件。我只想简单地更改按钮的背景色，但不幸的是，它不起作用。所有文件（包括jquery库）都放在一个文件夹中。任何线索都将不胜感激 html文件： <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-3.1.0.min.js">

我是web开发的绝对初学者。我有一个html、css和javascript文件。我只想简单地更改按钮的背景色，但不幸的是，它不起作用。所有文件（包括jquery库）都放在一个文件夹中。任何线索都将不胜感激

html文件：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-3.1.0.min.js"></script> 
    <script src="code.js"></script>
  </head>
  <body>
    <button class="button">Click!</button>
  </body>
</html>

javascript代码：

var clicked = function(){
    $('.button').clicked(function(){
        $(this).toggleClass("button_clicked");
    });
};

$(document).ready(clicked);

这只是一个简单的打字错误。请注意，变量名定义为

clicked

，但jQuery中的函数是

click（）

。因此，如果您进行以下更改，它应该可以正常工作：

var clicked = function(){
$('.button').click(function(){
    $(this).toggleClass("button_clicked");
});
};

$(document).ready(clicked);

尝试以下代码：

功能更改\u颜色（）
{
var NAME=document.getElementById（“按钮”）；
var currentClass=NAME.className；
如果（currentClass==“button”）{//请检查当前类名
NAME.className=“单击按钮”；//设置其他类名
}否则{
NAME.className=“button”；//否则，使用“第二个名称”`
}   
}

.button、.button\u单击{
背景色：#4CAF50；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}
.按钮被点击{
背景色：#ff0000；
}


点击

您不需要命名函数-直接将单击事件行为指定给按钮的单击：

$(document).ready(function(){
    $('.button').click(function(){
        $(this).toggleClass("button_clicked");
      });
});

$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
$（this.toggleClass（“单击按钮”）；
});
});
。按钮{
背景色：#4CAF50；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}
.按钮被点击{
背景色：#ff0000；
}

单击我
如果jqery文件位于html页面的同一个傻瓜中，请尝试使用ui./（点/）获取相对路径打开开发人员控制台。您是否在控制台中看到错误？JavaScript代码位于哪里？我看不到JS文件在那个html文档中的位置。它写：jQuery。延迟异常：$（…）。单击不是一个函数clicked@file：///C:/Users/Ehsan/Desktop/New%20folder/code.js:2:2 g/您可能正在寻找jQuery，而不是clicked（）。多亏了scaisEdge和epascarello以及@showdev。我将clicked函数改为click，现在就可以工作了。虽然这段代码确实可以工作，但我认为Javascript应该从HTML中完全删除，因为您希望将功能和标记分开。这将使维护更容易，并防止联合（如果适用）的潜在问题。此外，我建议修改您在此处编写的CSS以及Javascript，将button_clicked类添加到.button，而不是更改类名以减少所需CSS的数量。在这种情况下，您可以删除按钮类上除背景色以外的所有颜色。
$(document).ready(function(){
    $('.button').click(function(){
        $(this).toggleClass("button_clicked");
      });
});