本文旨在帮助开发者解决在使用 jQuery 时，点击按钮无法改变颜色的问题。通常，这可能是由于未正确引入 jQuery 库导致的。本文将提供详细的解决方案，包括如何正确引入 jQuery，以及一个可运行的示例代码，演示如何使用 jQuery 监听按钮点击事件并修改其背景颜色。
确保正确引入 jQuery
在使用 jQuery 之前，务必确保已在 HTML 文件中正确引入 jQuery 库。这是最常见的问题来源。可以通过以下几种方式引入：
- 使用 CDN 链接： 这是最简单快捷的方式。将以下代码添加到 HTML 文件的 <head> 标签或 <body> 标签的末尾：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
注意： 建议使用稳定的 CDN 链接，并定期检查其可用性。
- 下载 jQuery 文件并本地引入： 从 jQuery 官网 (https://www.php.cn/link/397dc71b9f153a88d57b040aa4870083) 下载最新版本的 jQuery 文件，并将其放置在你的项目目录中。然后在 HTML 文件中使用 <script> 标签引用该文件。例如，如果将 jquery-3.7.0.min.js 文件放在 js 目录下，则可以使用以下代码：
<script src="js/jquery-3.7.0.min.js"></script>
注意： 确保文件路径正确。
验证 jQuery 是否成功引入：
在引入 jQuery 后，可以在浏览器的开发者工具（通常按 F12 键打开）的控制台中输入 jQuery 或 $。如果返回 jQuery 对象，则表示 jQuery 已成功引入。如果出现 Uncaught ReferenceError: $ is not defined 错误，则表示 jQuery 未正确引入。
使用 jQuery 监听点击事件并改变颜色
一旦确认 jQuery 已成功引入，就可以使用 jQuery 来监听按钮的点击事件，并修改其背景颜色。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Button Color Change</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
.vote {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="rating">
<button class="vote">1</button>
<button class="vote">2</button>
<button class="vote">3</button>
<button class="vote">4</button>
<button class="vote">5</button>
</div>
<script>
$(document).ready(function(){
$(".vote").on("click", function(){
$(this).css("backgroundColor", "hsl(216, 12%, 54%)");
});
});
</script>
</body>
</html>代码解释：
- $(document).ready(function(){ ... });: 这段代码确保在整个 HTML 文档加载完成后再执行 jQuery 代码。
- $(".vote").on("click", function(){ ... });: 这段代码选择所有 class 为 vote 的元素（在本例中是所有的按钮），并为它们的 click 事件绑定一个函数。
- $(this).css("backgroundColor", "hsl(216, 12%, 54%)");: 当按钮被点击时，这段代码会将当前被点击按钮的背景颜色设置为 hsl(216, 12%, 54%)。$(this) 指的是当前被点击的按钮元素。
CSS 样式 (可选):
为了让按钮看起来更美观，可以在 <style> 标签中添加一些 CSS 样式，例如设置按钮的 padding、font-size 和 cursor。
总结
通过本文，你应该能够解决在使用 jQuery 时点击按钮无法改变颜色的问题。关键在于确保正确引入 jQuery 库，并使用正确的 jQuery 代码来监听点击事件并修改样式。记住，仔细检查错误信息，并使用浏览器的开发者工具进行调试，可以帮助你快速找到问题所在。
