单击javascript时颜色不会正确更改

我有这个下拉列表,它有两个选项,蓝色和绿色。如果我选择蓝色,每当我点击文本输入字段时,它的背景就会在蓝色和黑色之间切换,这是文本字段的背景颜色。红色选项也是如此。但是,我只工作过第一次和第二次的代码。从第三次开始,即使我选择红色,它也会在蓝色和另一种颜色之间切换。这是我的 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">


米琪卡哇伊
浏览 183回答 2
2回答

holdtom

当您这样做时$(element).click(...),您将一个新的侦听器附加到该元素。如果您重复执行此操作,这些侦听器将堆叠。在您的示例中,每次更改下拉列表时,您都会添加一个新事件 -而不是替换前一个事件。相反,最简单的方法可能是这样的:有一个存储颜色的全局变量将更改事件附加到您的下拉列表。更改后,将全局颜色变量设置为所选选项将点击事件附加到您的输入。单击时,将背景设置为全局颜色变量看起来像这样:我有这个下拉列表,它有两个选项,蓝色和绿色。如果我选择蓝色,每当我点击文本输入字段时,它的背景就会在蓝色和黑色之间切换,这是文本字段的背景颜色。红色选项也是如此。但是,我只工作过第一次和第二次的代码。从第三次开始,即使我选择红色,它也会在蓝色和另一种颜色之间切换。这是我的 HTML:有谁知道出了什么问题?我在想也许我没有完全理解 jquery 的更改功能是如何工作的。$('#change_color').on('change', function() {&nbsp; //get the text value of the option chosen&nbsp; var colorOption = $("#change_color option:selected").text();&nbsp; //if option chosen is red then allow change input box to red&nbsp; if (colorOption === 'Red') {&nbsp; &nbsp; $('.my-input').click(function(inputBox) {&nbsp; &nbsp; &nbsp; $(inputBox.target).toggleClass('red');&nbsp; &nbsp; });&nbsp; }&nbsp; //if option is chosen is red then allow change input box to blue&nbsp; else {&nbsp; &nbsp; $('.my-input').click(function(inputBox) {&nbsp; &nbsp; &nbsp; $(inputBox.target).toggleClass('blue');&nbsp; &nbsp; });&nbsp; }});.my-input {&nbsp; background-color: black;&nbsp; width: 5%;&nbsp; font-size: 3vw;}.red {&nbsp; background-color: red;&nbsp; width: 5%;&nbsp; font-size: 3vw;}.blue {&nbsp; background-color: blue;&nbsp; width: 5%;&nbsp; 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">&nbsp; <option selected disabled>Special Char</option>&nbsp; <option>Red</option>&nbsp; <option>Blue</option></select><input type="text" class="my-input"><input type="text" class="my-input"><input type="text" class="my-input">

慕尼黑5688855

找到上面的jsfiddle。您可以使用 just$('.my-input')来调用单击事件,删除所有类,然后进行检查以查看colorOption您选择的内容。//if option chosen is red then allow change input box to red$('.my-input').click(function(inputBox) {&nbsp; colorOption = $("#change_color option:selected").text();&nbsp; $(this).removeClass();&nbsp; colorOption === 'Red' ? $(inputBox.target).addClass('red') : $(inputBox.target).addClass('blue');});.my-input {&nbsp; background-color: black;&nbsp; width: 5%;&nbsp; font-size: 3vw;}.red {&nbsp; background-color: red;&nbsp; width: 5%;&nbsp; font-size: 3vw;}.blue {&nbsp; background-color: blue;&nbsp; width: 5%;&nbsp; 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">&nbsp; <option selected disabled>Special Char</option>&nbsp; <option>Red</option>&nbsp; <option>Blue</option></select><input type="text" class="my-input"><input type="text" class="my-input"><input type="text" class="my-input">
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript