jQuery实现点击按钮后如何重置选中值并替换对应顺位选项

完整实现代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.selected {
  background: #e0e0e0;
}
.clicked-order {
  display: inline-block;
  margin-right: 8px;
}
.reset {
  margin-left: 4px;
  padding: 0 4px;
  cursor: pointer;
  border: none;
  background: #ff4444;
  color: #fff;
  border-radius: 2px;
  font-size: 12px;
}
</style>
<div class="demo"></div>
<div class="clicked-order"></div>
<button id="one" class="vehicle" value="car">Car</button>
<div class="clicked-order"></div>
<button id="two" class="vehicle" value="bus">Bus</button>
<div class="clicked-order"></div>
<button id="three" class="vehicle" value="truck">Truck</button>
<div class="clicked-order"></div>
<button id="four" class="vehicle" value="copter">Copter</button>
<div class="clicked-order"></div>
<button id="five" class="vehicle" value="train">Train</button>

<script>
(function($){
  jQuery.fn.isEmpty = function() {
    return !$.trim(this.html()).length;
  };
}(jQuery));

// 核心配置
const LIMIT = 3;
const SEP = ',';
// 存储选中项，下标对应顺位-1，空位置为null
let selection = new Array(LIMIT).fill(null);

// 统一渲染函数
function render() {
  // 渲染结果容器
  $('.demo').text(selection.filter(Boolean).map(item => item.val).join(SEP));
  // 重置所有按钮状态和顺位标记
  $('.clicked-order').empty().hide();
  $('button.vehicle').removeClass('selected');

  // 按按钮分组统计关联的顺位
  const btnOrderMap = {};
  selection.forEach((item, index) => {
    if (!item) return;
    const btnId = $(item.el).attr('id');
    if (!btnOrderMap[btnId]) btnOrderMap[btnId] = [];
    btnOrderMap[btnId].push(index + 1);
  });

  // 渲染每个按钮的顺位和删除按钮
  Object.entries(btnOrderMap).forEach(([btnId, orders]) => {
    const $btn = $(`#${btnId}`);
    $btn.addClass('selected');
    const $orderDiv = $btn.prev('.clicked-order');
    $orderDiv.show();
    const orderHtml = orders.map(order => `${order} <button class="reset" data-order="${order}">X</button>`).join(' & ');
    $orderDiv.html(orderHtml);
  });
}

// 车辆按钮点击事件
$("button.vehicle").click(function() {
  // 优先找第一个空的顺位位置
  const emptyIndex = selection.findIndex(item => item === null);
  if (emptyIndex === -1) return;

  // 存入选中信息
  selection[emptyIndex] = {
    val: $(this).val(),
    el: this
  };
  render();
});

// 重置按钮点击事件（事件委托适配动态生成的按钮）
$(document).on('click', '.reset', function(e) {
  e.stopPropagation();
  const order = parseInt($(this).data('order'));
  selection[order - 1] = null;
  render();
});
</script>

功能说明 #

• 最多支持选中3个选项，新增选项会优先填充已删除释放的空顺位，不会默认追加到末尾
• 同一按钮支持被多次选中，会在旁边显示所有关联的顺位，每个顺位对应独立的X删除按钮
• 点击X按钮会立即释放对应顺位名额，同时同步更新.demo容器的输出内容和按钮选中状态
• 原有的点击顺序展示、多选同一选项的逻辑完全保留

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