点击按钮切换图片失效，求助简化JavaScript评分检查函数

先说说你代码里的几个问题：

• checkRating函数完全没必要，它只是把传入的布尔值原封不动返回，纯属多余
• clickthumbUp里直接把clickedThumbUP设为true，这只能让状态变成“已点击”，没法切回“未点击”，自然实现不了切换效果
• toggleClass失效是因为：代码被注释了；而且在onclick里调用函数时，this指的是全局window，不是你点的那张img，所以$("img", this)找不到元素；另外CSS里用的是ID选择器，但toggleClass操作的是类名，得改成类选择器才行

下面是简化后的完整代码，两种实现方式任选：

方式1：直接切换img的src（最简单） #

HTML #

<div class="rating-img">
  <img id="thumbup" onclick="clickthumbUp();" src="https://via.placeholder.com/100" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JavaScript #

var clickedThumbUP = false;
var clickedThumbDown = false;

// 删掉没用的checkRating函数
function clickthumbUp() {
  // 每次点击反转状态，这才是切换的核心
  clickedThumbUP = !clickedThumbUP;

  // 根据状态换图片
  $('#thumbup').attr('src', clickedThumbUP ? "https://via.placeholder.com/100/ff0000" : "https://via.placeholder.com/100/ff00ff");
  
  return clickedThumbUP;
}

方式2：用toggleClass切换样式（适合复杂样式） #

如果想用类来控制样式，建议把img换成div（避免src和背景图冲突）：

HTML #

<div class="rating-img">
  <div id="thumbup" onclick="clickthumbUp();" class="thumb-default"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS #

.thumb-default {
  width: 100px;
  height: 100px;
  background-image: url(https://via.placeholder.com/100);
  background-size: cover;
  cursor: pointer; /* 加个鼠标指针，让用户知道这是可点击的 */
}

.thumb-active {
  background-image: url(https://dl.dropboxusercontent.com/scl/fi/ufflmo9rk3oey45v04dlo/icons8-thumbs-up-50_b.png?rlkey=thmvs34cuo7fiw66wzkaj8o74&dl=1);
}

JavaScript #

var clickedThumbUP = false;

function clickthumbUp() {
  clickedThumbUP = !clickedThumbUP;
  // 直接用toggleClass切换类，不用写if-else
  $('#thumbup').toggleClass('thumb-active');
  
  return clickedThumbUP;
}

关键修改点总结 #

1. 删掉冗余的checkRating：直接用clickedThumbUP变量判断状态就行，不需要额外函数
2. 状态反转：用clickedThumbUP = !clickedThumbUP实现点击切换，而不是直接设为true
3. 修复toggleClass：直接通过ID定位元素调用toggleClass，同时CSS里用类选择器（.开头）而不是ID选择器

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