Question

我正在创建一个类似于this的草图。我有以下功能来定义用户将使用的绘图类型：黑白，随机颜色或灰色阴影。用户通过单击不同的按钮来决定使用哪种情况，每个按钮都调用一个单独的案例：

switch (colorMode){
    case 'bw':
        $(".grid").mouseenter(function(){ 
            $(this).css('background-color', "#EEEEEE");
        });
        break;
    case 'randomColor':
        $(".grid").mouseenter(function(){
            var randomColor = Math.floor(Math.random()*16777215).toString(16); //random number between 0 and 1, nultiplied by largest hexidecimal/color value, and the converted to a string.
            $(this).css('background-color', "#" + randomColor);
        });
        break;
    case 'fading':
        $(".grid").mouseenter(function(){
            var currentColor = $(this).css('background-color').slice(4, -1).split(', ');
            var newColor = [];
            for (i=0; i<currentColor.length; i++){
                newColor[i] = Math.round(parseInt(currentColor[i]) - (parseInt(currentColor[i])*.1));
            }
            var rgbString = "rgb(" + newColor[0] + "," + newColor[1] + "," + newColor[2] + ")"; 
            $(this).css('background-color', rgbString);
        });
        break;
}

我遇到的意外行为是，当用户单击按钮以使用不同的情况时，它们不是替换先前的mouseenter效果，而是添加了mouseenter效果。这意味着，如果用户执行黑白，切换为颜色，然后返回黑白，则每个.grid将变为灰色，随机颜色，然后返回灰色。这是用户看不到的，但并不理想。特别是，因为它正在弄乱我的褪色效果。有没有办法取代mouseenter效果？或杀死以前的？我只需要为我的代码找到一个新结构吗？

Answer 1

请尝试在事件处理程序中创建switch：

$(".grid").mouseenter(function(){
    switch(colorMode) {
         //...
    }
});

这样，事件处理程序只会绑定一次。

如何停止.mouseenter（）效果

1 个答案: