如何使用 Javascript 更改带有 Select 元素的卡片 header 颜色而不影响其他卡片？

Question

我有不止一张卡片，在每张卡片中，我都有一个 Select 元素。当用户从 Select 元素中选择一个选项时，卡片 header 会改变颜色；但是，它也会更改所有其他卡 header。我怎样才能把它们分开？

    [data-background-color='empty'] {
      background-color: #595959;
      color: white;
    }

    [data-background-color='icu'] {
      background-color: #9933ff;
      color: white;
    }
    
    [data-background-color='med'] {
      background-color: #0066ff;
      color: white;
    }

<div class="card">
  <div class="card-header" data-background-color="empty">
    <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">

        <option selected value="0">Empty</option>
        <option value="1">ICU</option>
        <option value="2">Med</option>
        
     </select>
     <!--some other content-->
  </div>
</div>

$('#unitSelect').on('change', function() {
  switch ($(this).val()) {
    case '0':
      $('.card-header').attr('data-background-color', 'empty');
      break
    case '1':
      $('.card-header').attr('data-background-color', 'icu');
      break;
    case '2':
      $('.card-header').attr('data-background-color', 'med');
      break;
 }
});

Answer 1

而不是使用 select 或 $('.card-header')，而是使用正在更改的 select 元素的 parent()，如 $(this).parent().attr('data-background-color', 'empty');

这只会影响正在更改的 select 元素的 .card-header。

$('.form-select').on('change', function() {
  switch ($(this).val()) {
    case '0':
      $(this).parent().attr('data-background-color', 'empty');
      break
    case '1':
      $(this).parent().attr('data-background-color', 'icu');
      break;
    case '2':
      $(this).parent().attr('data-background-color', 'med');
      break;
  }
});

[data-background-color='empty'] {
  background-color: #595959;
  color: white;
}

[data-background-color='icu'] {
  background-color: #9933ff;
  color: white;
}

[data-background-color='med'] {
  background-color: #0066ff;
  color: white;
}

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

<div class="card">
  <div class="card-header" data-background-color="empty">
    <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">

      <option selected value="0">Empty</option>
      <option value="1">ICU</option>
      <option value="2">Med</option>

    </select>
    <!--some other content-->
  </div>
</div>
<div class="card">
  <div class="card-header" data-background-color="empty">
    <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">

      <option selected value="0">Empty</option>
      <option value="1">ICU</option>
      <option value="2">Med</option>

    </select>
    <!--some other content-->
  </div>
</div>
<div class="card">
  <div class="card-header" data-background-color="empty">
    <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">

      <option selected value="0">Empty</option>
      <option value="1">ICU</option>
      <option value="2">Med</option>

    </select>
    <!--some other content-->
  </div>
</div>

如何使用 Javascript 更改带有 Select 元素的卡片 header 颜色而不影响其他卡片？

How to change a card header color with a Select element, using Javascript, without affecting other cards?

html

javascript

css

bootstrap-5