无法加载jQuery代码

我是网页开发人员的绝对初学者。我有一个HTML，CSS和JavaScript文件。我只想改变一个按钮的背景颜色，但不幸的是它不起作用。所有的文件（包括jQuery库）都被放置在一个文件夹中。任何线索表示赞赏。无法加载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>

css文件：

.button { 
    background-color: #4CAF50; 
    border: none; 
    color: white; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
} 

.button_clicked { 
    background-color: #ff0000; 
}

的JavaScript代码：

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

$(document).ready(clicked);

来源

2016-07-21 ehsan toghian

如果jqery文件是在你的HTML页面的相同foolder尝试uisng ./（点/）的相对路径 – scaisEdge

打开开发者控制台。你看到控制台中的错误吗？ JavaScript代码位于何处？我看不到你的JS文件在那个html文档中的位置。 – epascarello

它写道：** jQuery.Deferred异常：$（...）。clicked不是一个函数clicked @ file：/// C：/Users/Ehsan/Desktop/New%20folder/code.js：2：2 g/

这只是一个简单的拼写错误。注意你的变量名被定义为clicked，但jQuery中的函数是click()。所以，如果你做如下改变它应该只是罚款：

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

$(document).ready(clicked);

来源

2016-07-21 20:50:33 ahajib

试试这个代码：

function change_color() 
 
{ 
 
    var NAME = document.getElementById("button"); 
 
    var currentClass = NAME.className; 
 
    if (currentClass == "button") { // Check the current class name 
 
     NAME.className = "button_clicked"; // Set other class name 
 
    } else { 
 
     NAME.className = "button"; // Otherwise, use `second_name` 
 
    } 
 
}

.button ,.button_clicked { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
} 
 

 
.button_clicked { 
 
    background-color: #ff0000; 
 
}

<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" id="button" onclick="change_color()">Click!</button> 
 
</body> 
 
</html>

来源

2016-07-21 21:06:55 Vaibhav

尽管这段代码确实有效，但我会争辩说，应该将Javascript完全从HTML中删除，因为要保持功能和标记分离。它会使维护更容易，并防止联合发布的潜在问题（如果适用）。另外，我会建议修改您在此处编写的CSS以及Javascript以将button_clicked类添加到.button，而不是更改类名以减少数量需要的CSS。在这种情况下，您可以删除button_clicked类中的所有背景颜色。 – Josh

你不需要命名的函数 - 分配click事件行为直接点击该按钮：

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

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

.button { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
} 
 

 
.button_clicked { 
 
    background-color: #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="button">Click Me</button>

来源

2016-07-21 21:07:37 gavgrif

无法加载jQuery代码

回答

相关问题