jQuery实现最多选3个时间块功能遇阻，需添加取消选择功能

我来帮你搞定这个时间块选择的问题～先梳理下原代码里的几个小问题：

• 判断选满的逻辑顺序搞反了：你是先添加选中样式再判断是否达到上限，这会导致第4个点击也会先加上样式才触发return false
• 用字符串 "3" 和数字类型的 selected_num 比较，虽然JS能隐式转换，但类型不一致容易踩坑
• 完全没处理取消选择的逻辑，点击已选中的块没法取消选中状态

下面是修正后的完整代码，我加了详细注释方便你理解：

// 初始化选中数量
var selected_num = 0; 

$('.time-block').click(function() {
  var $this = $(this);
  var chosen_time = $this.data('time');
  var isChosen = $this.hasClass('-chosen');

  // 情况1：当前块已经被选中，执行取消操作
  if (isChosen) {
    $this.removeClass('-chosen');
    // 找到对应显示该时间的区域并清空
    $('.time-selected-block').filter(function() {
      return $(this).text() === chosen_time;
    }).empty();
    selected_num--;
  } 
  // 情况2：当前块未被选中，且还没选满3个，执行选中操作
  else if (selected_num < 3) {
    $this.addClass('-chosen');
    // 找到第一个空的显示区域填充时间
    $('.time-selected-block').filter(':empty').first().html(chosen_time);
    selected_num++;
  }
  // 情况3：已经选满3个，直接终止操作
  else {
    return false;
  }

  console.log('当前选中数量：', selected_num);
});

关键改进点说明： #

• 取消选择逻辑：通过hasClass('-chosen')判断当前块是否已选中，是的话就移除样式、清空对应的显示区域，同时把计数减1
• 选中逻辑前置判断：先检查是否已经选满3个，没满才执行选中操作，避免先加样式再取消的尴尬
• 显示区域匹配优化：取消时精准找到对应时间的显示框清空，选中时优先填充第一个空框，逻辑更合理
• 类型统一：用数字3和selected_num比较，避免类型转换带来的潜在问题

这样修改后，就能完美实现需求：最多选3个时间块，选满后无法继续选择，点击已选中的块可以取消选择并实时更新计数和显示区域啦～

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