Jquery addClass，否则无法正常工作

所以基本上，我希望它能根据我的选择改变等级。当我第一次更改它时，它将类从

黑色

更改为

彩色

，但当我重新更改它时，它将同时保持

黑色

和

彩色

有人能解释一下为什么会发生这种情况，因为我在更改时删除了所有类，然后再次调用

hover（）

，然后根据我的选择应用类。显然，如果我删除

removeClass

方法上的注释，它是有效的，但我不明白为什么我需要它。提前谢谢

HTML:

---

您不能在事件处理程序中绑定事件处理程序，并且期望它会发生更改，这两个事件处理程序，以及在更改select时可能会有更多的事件处理程序，都将绑定到元素，它们不会消失

您必须绑定一次处理程序，然后只检查其中的值

$（“#container>div”）.on（'mouseenter mouseleave'，函数（e）{
var color=$（“选择[name=color]”）.val（）；
如果（颜色==“黑白”）{
$（this.removeClass（“colored”）.toggleClass（“black”，e.type=='mouseenter'）；
}else if（颜色==“有色”）{
$（this.removeClass（“black”）.toggleClass（“colored”，e.type=='mouseenter'）；
}
});
#容器分区{
高度：100px；
宽度：100px；
位置：相对位置；
边框：1px实心#000；
利润率：20px；
颜色：红色；
}
#货柜部{
背景：绿色
}
#黑色货柜部{
背景：黑色
}
}

黑白
有色的
盘旋我
您不能在事件处理程序中绑定事件处理程序，并且期望它会发生更改，两个事件处理程序，以及可能更多的事件处理程序，都将绑定到元素，它们不会消失

您必须绑定一次处理程序，然后只检查其中的值


$（“#container>div”）.on（'mouseenter mouseleave'，函数（e）{
var color=$（“选择[name=color]”）.val（）；
如果（颜色==“黑白”）{
$（this.removeClass（“colored”）.toggleClass（“black”，e.type=='mouseenter'）；
}else if（颜色==“有色”）{
$（this.removeClass（“black”）.toggleClass（“colored”，e.type=='mouseenter'）；
}
});
#容器分区{
高度：100px；
宽度：100px；
位置：相对位置；
边框：1px实心#000；
利润率：20px；
颜色：红色；
}
#货柜部{
背景：绿色
}
#黑色货柜部{
背景：黑色
}
}

黑白
有色的
盘旋我
提供您的html以及用html更新的html。
#container
元素在哪里？提供您的html以及用html更新的html。
#container
元素在哪里？
 <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>

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();
});