цвет не меняется правильно при нажатии JavaScript

Question

У меня есть этот выпадающий список, который имеет два варианта, синий и зеленый. Если я выберу синий, то всякий раз, когда я нажимаю на поле ввода текста, его фон переключается между синим и черным, что является цветом фона текстового поля. То же самое касается красного варианта. Тем не менее, код, который я работал только в первый и второй раз. С третьего раза, даже если я выберу красный, он переключается между синим и другим цветом. Это мой HTML:

Кто-нибудь знает, что не так? Я думаю, может быть, я не до конца понимаю, как работает функция изменения jquery.

$('#change_color').on('change', function() {
  //get the text value of the option chosen

  var colorOption = $("#change_color option:selected").text();

  //if option chosen is red then allow change input box to red
  if (colorOption === 'Red') {
    $('.my-input').click(function(inputBox) {
      $(inputBox.target).toggleClass('red');
    });
  }

  //if option is chosen is red then allow change input box to blue
  else {
    $('.my-input').click(function(inputBox) {
      $(inputBox.target).toggleClass('blue');
    });
  }
});

.my-input {
  background-color: black;
  width: 5%;
  font-size: 3vw;
}

.red {
  background-color: red;
  width: 5%;
  font-size: 3vw;
}

.blue {
  background-color: blue;
  width: 5%;
  font-size: 3vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="change_color" class="form-control box-border" placeholder="SPECIAL CHAR">
  <option selected disabled>Special Char</option>
  <option>Red</option>
  <option>Blue</option>
</select>
<input type="text" class="my-input">
<input type="text" class="my-input">
<input type="text" class="my-input">

Answer 1

Когда вы делаете $(element).click(...), вы присоединяете нового слушателя к этому элементу. Если вы делаете это неоднократно, эти слушатели будут складываться. В вашем примере, каждый раз, когда вы меняете раскрывающийся список, вы добавляете новое событие - , а не , заменяя предыдущее.

Вместо этого самый простой подход может выглядеть примерно так:

• Иметь глобальную переменную, в которой хранится цвет

• Присоединить событие изменения к вашему раскрывающемуся списку. После изменения установите глобальную переменную цвета на выбранную опцию

• Прикрепите событие нажатия к вашим входам. При нажатии установите фон для глобальной переменной цвета

Это будет выглядеть так:

let backgroundColor;                                //Global var to hold color choice

$("#change_color").on("change", function() {        //When <select> changes
  backgroundColor = $(this).val();                  //Update global var
}).change();                                        //Fire this event on page-load

$(".my-input").on("click", function() {             //When input is clicked
  $(this).toggleClass(backgroundColor);             //Toggle class
});

.my-input { background-color: black; }
.blue { background-color: blue; }
.red { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="change_color">
  <option>blue</option>
  <option>red</option>
</select>

<input class="my-input" />
<input class="my-input" />
<input class="my-input" />

Answer 2

Jsfiddle

Найдите вышеуказанное jsfiddle.

Вы можете использовать $('.my-input'), чтобы вызвать событие щелчка, удалить все классы, а затем выполнить проверку, чтобы увидетьчто colorOption вы выбрали.

//if option chosen is red then allow change input box to red
$('.my-input').click(function(inputBox) {
  colorOption = $("#change_color option:selected").text();
  $(this).removeClass();
  colorOption === 'Red' ? $(inputBox.target).addClass('red') : $(inputBox.target).addClass('blue');
});

.my-input {
  background-color: black;
  width: 5%;
  font-size: 3vw;
}

.red {
  background-color: red;
  width: 5%;
  font-size: 3vw;
}

.blue {
  background-color: blue;
  width: 5%;
  font-size: 3vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="change_color" class="form-control box-border" placeholder="SPECIAL CHAR">
  <option selected disabled>Special Char</option>
  <option>Red</option>
  <option>Blue</option>
</select>
<input type="text" class="my-input">
<input type="text" class="my-input">
<input type="text" class="my-input">