jQuery结合if else切换按钮背景色及判断条件问题

这个if判断完全无法正常工作，存在两个致命问题：

• 语法错误：选择器前缺失jQuery对象声明符$，('#btn1')无法选中目标按钮，代码运行到这里会直接抛出JavaScript错误。
• 逻辑错误：jQuery调用.css("background-color")获取的颜色值，不会返回你设置的"green"这类颜色关键字，所有浏览器都会统一将颜色解析为rgb()/rgba()格式的字符串，标准绿色对应的返回值是rgb(0, 128, 0)，透明背景返回值为rgba(0, 0, 0, 0)，直接和字符串"green"做全等判断永远不会返回true。

不要直接读取计算样式做判断，最稳妥、兼容性最好的方案是通过CSS类切换状态，不需要手写分支判断逻辑：

/* 定义点赞激活状态的样式类 */
.btn-vote-up {
  background-color: green;
}

function vote(str){
  if(str === 1){
    // toggleClass会自动判断类名是否存在：存在则移除，不存在则添加
    $('#btn1').toggleClass('btn-vote-up');
  } else {
    $('#btn2').css("background-color", "red");
  }
}

如果你一定要直接判断内联样式值，需要补全$符号，同时匹配浏览器返回的rgb格式值：

function vote(str){
  if(str === 1){
    // 补全$，匹配浏览器返回的rgb格式绿色值
    if( $('#btn1').css("background-color") === "rgb(0, 128, 0)" ){
      $('#btn1').css("background-color", "");
    } else {
      $('#btn1').css("background-color", "green");
    }
  } else {
    $('#btn2').css("background-color", "red");
  }
}

注意：不同浏览器、不同jQuery版本对透明色的返回格式可能存在差异，直接匹配rgb值的方案存在兼容风险，优先选择类名切换的实现方式。

内容的提问来源于stack exchange，提问作者IU Kottahchchi