javascript - 单击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">
解决方案
找到上面的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">
推荐阅读
- javascript - 尝试为学习伙伴类型的网站制作进度计数器
- protractor - 量角器:多次循环简单测试 - 无参数
- php - PHP 需要“guzzle.phar”会引发致命错误,但在页面刷新时有效
- javascript - 未通过 php 调用 shell 脚本和在 php 中运行 shell 脚本的完成状态
- python - Python loadarff 对字符串属性失败
- c++ - STM32 Switch Case影响操作
- javascript - 将 div img 更改为另一个中的活动图像
- android - 使用 Retrofit 将文件数组上传到服务器
- azure-devops - 在运行时添加其他映射以获取源(Azure DevOps 管道 - TFVC)
- oracle - 在 Oracle 中使用触发器将列值设置为等于另一列