如何使用JavaScript通过Select元素修改单张卡片头部颜色且不影响其他卡片

你的代码存在两个核心错误导致操作未隔离：

• 重复使用id属性：id="unitSelect"在DOM规范中必须全局唯一，多卡片复用同一个id会导致事件绑定异常
• 选中范围错误：JS中直接使用$('.card-header')会命中页面所有卡片头部，没有限定为当前触发事件的select所属的头部

修复步骤 #

1. 修改HTML结构 #

将select的id属性替换为class，避免id重复：

<div class="card">
  <div class="card-header" data-background-color="empty">
    <select class="unit-select form-select form-select-sm" aria-label=".form-select-sm example">
        <option selected value="0">Empty</option>
        <option value="1">ICU</option>
        <option value="2">Med</option>
     </select>
     <!--some other content-->
  </div>
</div>
<!-- 其余卡片结构同上，select均使用unit-select类 -->

2. 修改JS逻辑 #

通过closest()方法定位当前select所属的卡片头部，仅修改该元素的属性：

// 绑定事件到所有unit-select类的select元素
$('.unit-select').on('change', function() {
  // 定位当前select所在的卡片头部
  const currentHeader = $(this).closest('.card-header');
  switch ($(this).val()) {
    case '0':
      currentHeader.attr('data-background-color', 'empty');
      break
    case '1':
      currentHeader.attr('data-background-color', 'icu');
      break;
    case '2':
      currentHeader.attr('data-background-color', 'med');
      break;
 }
});

修改后每个select的change事件只会作用于自身所属的卡片头部，不会影响其他卡片。

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