颜色不'；单击javascript时无法正确更改

我有一个下拉列表，有两个选项，蓝色和绿色。如果我选择蓝色，每当我单击文本输入字段时，它的背景会在蓝色和黑色之间切换，这是文本字段的背景色。红色选项也是如此。然而，我只工作了第一次和第二次的代码。从第三次开始，即使我选择红色，它也会在蓝色和其他颜色之间切换。 这是我的HTML：

有人知道怎么回事吗？我在想也许我不完全理解jquery的更改函数是如何工作的

$（'change#u color'）。在（'change'，function（）上{
//获取所选选项的文本值
var colorOption=$（“#更改#颜色选项：选中”）.text（）；
//如果选择的选项为红色，则允许将输入框更改为红色
如果（颜色选项==='Red'）{
$（'.my input'）。单击（函数（inputBox）{
$（inputBox.target）.toggleClass（'red'）；
});
}
//如果选择的选项为红色，则允许将输入框更改为蓝色
否则{
$（'.my input'）。单击（函数（inputBox）{
$（inputBox.target）.toggleClass（'blue'）；
});
}
});
。我的输入{
背景色：黑色；
宽度：5%；
字体大小：3vw；
}
瑞德先生{
背景色：红色；
宽度：5%；
字体大小：3vw；
}
蓝先生{
背景颜色：蓝色；
宽度：5%；
字体大小：3vw；
}

特殊字符
红色
蓝色

找到上面的jsfiddle

您可以使用
$（'.my input'）
调用单击事件，删除所有类，然后执行检查以查看您选择的
颜色选项


//如果选择的选项为红色，则允许将输入框更改为红色
$（'.my input'）。单击（函数（inputBox）{
colorOption=$（“#更改#颜色选项：选中”）.text（）；
$（this.removeClass（）；
colorOption=='Red'？$（inputBox.target）.addClass（'Red'）：$（inputBox.target）.addClass（'blue'）；
});
。我的输入{
背景色：黑色；
宽度：5%；
字体大小：3vw；
}
瑞德先生{
背景色：红色；
宽度：5%；
字体大小：3vw；
}
蓝先生{
背景颜色：蓝色；
宽度：5%；
字体大小：3vw；
}

特殊字符
红色
蓝色
当您执行
$（元素）时。单击（…）
，您将向该元素附加一个新的侦听器。如果重复执行此操作，则这些侦听器将堆叠。在您的示例中，每次更改下拉列表时，您都会添加一个新事件-而不是替换上一个事件

相反，最简单的方法可能是这样的：


具有存储颜色的全局变量

将更改事件附加到下拉列表中。更改后，将全局颜色变量设置为选定选项

将单击事件附加到输入。单击时，将背景设置为全局颜色变量


看起来是这样的：


let backgroundColor//用于保存颜色选择的全局变量
$（“#更改颜色”）。在（“更改”上，函数（）更改时{//
backgroundColor=$（this）.val（）；//更新全局变量
}).change（）//在页面加载时触发此事件
$（“.my input”）。在（“单击”上，单击输入时函数（）{//
$（this）.toggleClass（backgroundColor）；//Toggle类
});
.my input{背景色：黑色；}
.blue{背景色：蓝色；}
.red{背景色：红色；}

蓝色
红色
了解像
这样的方法很重要。单击
或
。在
上实际执行。在您的情况下，这些不会触发事件发生；他们正在添加一个侦听器。通过反复调用
。在同一个元素上单击
，可以一次又一次地堆叠事件。确切地说，我放置了console.log（$（inputBox.target）），查看它们在做什么，并看到一堆事件在堆叠。你有解决办法吗？我已经提交了答案。好的，谢谢，我会查出来的