I am trying to make a feature where the class changes based on my selection. The issue I am facing is that when I change it for the first time, it switches from being classified as "black" to "colored". However, upon changing it back, it remains labeled as both "black" and "colored". Can someone shed some light on why this is happening? I have already removed all existing classes upon change and called the hover() function again, which should then apply the appropriate class based on my selection. It seems to work if I uncomment the removeClass method, but I fail to comprehend why it is necessary. Thank you in advance for your help.
Here is the HTML code:
<form>
<select name="color">
<option value="black-white">Black/White</option>
<option value="colored">Colored</option>
</select>
<input type="checkbox" checked>Borders (on/off)
</form>
And here is the jQuery code snippet:
function hover() {
var color = $("select[name=color]").val();
if (color === "black-white") {
$("#container > div").hover(function() {
/*$(this).removeClass("colored");*/
$(this).addClass("black");
});
} else if (color === "colored") {
$("#container > div").hover(function() {
/*$(this).removeClass("black");*/
$(this).addClass("colored");
});
}
}
$("select[name=color]").change(function() {
$("#container > div").removeClass();
hover();
});