Блог

Главная - Вопросы по программированию - Как изменить цвет заголовка карты с помощью элемента Select, используя Javascript, не затрагивая другие карты?

Как изменить цвет заголовка карты с помощью элемента Select, используя Javascript, не затрагивая другие карты?

#javascript #html #css #bootstrap-5

Вопрос:

У меня есть более одной карты, и внутри каждой карты у меня есть элемент выбора. Заголовок карты меняет цвет, когда пользователь выбирает опцию из элемента «Выбор»; однако он также изменяет все остальные заголовки карт. Как я могу их разделить?

     [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;
 }
});

Ответ №1:

Вместо использования селектора $('.card-header') используйте родительский() элемента select, который изменяется следующим образом $(this).parent().attr('data-background-color', 'empty');

Это повлияет только на заголовок .карты изменяемого элемента select.

 $('.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>

Комментарии:

1. Большое тебе спасибо, Нандита! Ваше предложение сработало так, как мне было нужно.

Метки: , ,