拜托大家... 先说一句， 这篇文章写得不咋样，作者也不是啥较大牛，写的像是从厨房里抄的笔记一样，想要看懂别怪我，反正你要是想把按钮点成彩虹色，这里有点破烂的办法。

一、 先准备点东西

拉倒吧... 1. 一个普通的 html 文件 2. jQuery 库 3. 一点点脑细胞

下面给你举个最最最简洁的例子，直接把下面这段代码粘贴进你的 .html 里就行，搞一下...。

二、 HTML 结构

    
    
下面是一堆按钮，点了会变颜色。注意：如果没引入 jQuery，会报错 Uncaught ReferenceError: $ is not defined，当冤大头了。。
    1
    2
    3
    4
    5
    

搞起来。 上面那段代码里 我用了最常见的 .on 方法来监听点击事件，用 .css 把背景色改成了一种灰蓝色。你能够随便改成红色或者绿草色，只要把 hsl 换掉就行。

三、 代码阐述

• $.ready等页面加载完再落实里面的代码，避免找不到元素。
• $选中全部 class 为 vote 的按钮。
• .on{ ... })给这一些按钮绑上点击事件。
• $.css把当前被点到的按钮背景颜色改掉。

注意啊， 如果你遗忘在 head 里加上 jQuery 的 script 标签，控制台会直接弹出 Uncaught ReferenceError: $ is not defined，这时候你只能去 Google 搜索“$ is not defined”了。

四、完整示例代码

  
  
   
&& &   á&l;e;r;t;;
 
   按 我 一 下 - A
   按 我 二 下 - B
   按 我 三 下 - C
   

话虽然是这么说… 这段代码比之前的更炫酷一点——每次点都会随机生成一个 rgb 色值，让你的页面瞬间像派对一样嗨。不过如果你觉得随机太花哨， 也能够直接写死颜色，比如：

$.css;

五、常见错误汇总

1. $ is not defined：遗忘引入 jquery 或者引入顺序搞错。一定要保证 script src 在你的自定义脚本之前。
2. .css 写错属性名：比如写成 backgroundcolor ， jQuery 是区分较大较小写的，要么 backgroundColor 要么 background-color 都行，但不能随便拼。
3. 选择器打错：比如用了 .voet 而不是 .vote， 这样根本找不到元素，点击天然不生效。
4. DOM 没加载完就绑定事件：如果把脚本放在 head 最前面而没有 ready 包裹，就会找不到元素报错。最保险的方法就是把脚本放在 body 底部或者用 ${}) 包起来。
5. CORS 问题：If you load jquery from a blocked CDN in China , file won't load and you'll see same $ undefined error.

六、 感想

未来可期。 其实弄当前这个真实的不不容简单，就是更多敲几遍复制粘贴，有时候手残键盘打不出来那就直接 copy 上面的代码块吧。别跟我说你不会，我已经帮你把坑都填良好了你只需要打开浏览器拖进去看效果就行。如果还有问题，那只能自己去 Google 搜索“jQuery button click change color”。祝你玩得开心！🍻🍻🍻

免责声明：本文仅供学习了解交流采用， 如因采用本文代码引起网站崩溃或其他后果，本人概不负责。文中全部示例均为较低保真实版，实际项目请自行优化和测试，划水。。