聊天机器人点赞按钮存储异常：仅保留最后点击值问题排查

问题场景 #

聊天机器人的每个消息气泡都配置了点赞按钮，所有按钮和气泡都有独立索引。尝试将所有点赞按钮的点击状态存入字典rating_dict，但目前只有最后一次点赞操作的值能被正确保存，之前的按钮状态会被覆盖。

代码示例 #

JavaScript 代码 #

let clickedThumbUP = false;
let rating_dict = { "ratingUp": {}};

//for each click, we store the button id and click response to a dictionary, then we push the entire dictionary to the database? 
let rating_up = $(" .thumbup").click(function(){
  
  //let rating_up  = checkRating(clickedThumbUP);
  clickedThumbUP = !clickedThumbUP; // Toggle state on each click

  // get button id
  buttonid = $(this).data("index")

  if (clickedThumbUP === true) {
        $(this).toggleClass("thumbup thumb-up-black");

        //store result in dictionary
         rating_dict['ratingUp'][buttonid] = true;
        //user can't press the thumbdown button

          return true
        }
      
      else{

        $(this).toggleClass("thumbup thumb-up-black");

        //for (let item of Object.entries(rating_dict['ratingUp'])){
          rating_dict['ratingUp'][buttonid] = false;
        //}

        return false

      }
  

  });

HTML 代码 #

<div class="msg ${side}-msg">
  <div class="msg-img" style="background-image: url(${img})"></div>
  <div class="ratings">
    
 
  <div class="msg-bubble">
    <div class="rating-img">
    <button type="submit" class="thumbup" data-index="${message_index}"></button>
    <button type="submit" class="thumbDown" id="thumbDown-${message_index}"></button>
    </div>

  </div>
    <div class="msg-text">${text}</div>  
</div>

</div>
</div>

问题成因 #

核心问题出在全局变量clickedThumbUP的复用：

• 所有点赞按钮共享同一个clickedThumbUP状态变量，点击任意按钮都会修改这个全局值。
• 比如：先点击按钮A，clickedThumbUP变为true，此时A的状态被设为true；接着点击按钮B，clickedThumbUP被反转为false，此时处理B的逻辑时会错误地将B的状态设为false，而不是基于B自身之前的状态判断。
• 后续点击其他按钮时，全局变量的状态会被不断覆盖，导致字典里只有最后一次操作的按钮状态是正确的，之前的按钮状态会因全局变量的错误反转而被错误更新或覆盖。

解决方法 #

给每个按钮维护独立的状态，不要用全局变量：

方案1：利用元素的data()存储自身状态 #

let rating_dict = { "ratingUp": {}};

$(".thumbup").click(function(){
  const $btn = $(this);
  const buttonid = $btn.data("index");
  // 从元素自身获取当前状态，没有则默认false
  let clickedThumbUP = $btn.data("clicked") ?? false;
  
  clickedThumbUP = !clickedThumbUP;
  $btn.data("clicked", clickedThumbUP); // 更新元素自身状态

  $btn.toggleClass("thumbup thumb-up-black");
  rating_dict['ratingUp'][buttonid] = clickedThumbUP;

  return clickedThumbUP;
});

方案2：通过类名判断当前状态 #

let rating_dict = { "ratingUp": {}};

$(".thumbup").click(function(){
  const $btn = $(this);
  const buttonid = $btn.data("index");
  // 直接通过当前类名判断是否已点赞
  const isLiked = $btn.hasClass("thumb-up-black");
  
  if (isLiked) {
    $btn.removeClass("thumb-up-black").addClass("thumbup");
    rating_dict['ratingUp'][buttonid] = false;
    return false;
  } else {
    $btn.removeClass("thumbup").addClass("thumb-up-black");
    rating_dict['ratingUp'][buttonid] = true;
    return true;
  }
});

两种方案都能让每个按钮独立维护自己的点赞状态，避免全局变量带来的状态混乱，确保rating_dict中每个按钮的状态都能正确保存。

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