Question

我使用简单的脚本根据悬停的div更改所有内容的颜色。它在一个方向上工作正常（在线下）但如果我逆转订单并返回，颜色不起作用。

目标是使除了悬停的div之外的所有东西都变成相同的颜色。悬停的div应该是默认的浅灰色。这里有两个可能更多的功能：

$('#red').mouseover(function(){
    $(this).add("#content").removeClass();
    $("#content, nav div").not(this).addClass("red");
});
$("#blue").mouseover(function(){
    $(this).add("#content").removeClass();
    $("#content, nav div").not(this).addClass("blue");
});

这里有一个jsfiddle，展示了完整的事情：http://jsfiddle.net/8bchybrr/

谢谢......（另外，我知道这个JS非常丑陋且效率低。除了创建另一个函数来调用冗余部分，不知道如何使它更简洁）

---

答案 - 我只需要添加：

$("#content, nav div").removeClass();

到每个函数，否则类会积累并发生冲突。现在看起来有点傻......以为我这样做但绝对没有。谢谢！

Answer 1

问题是你只是从mouseover-ed元素和#content中删除了类 - 而不是从所有其他元素中删除了类，所以那些不同的颜色类继续“堆积”。

编辑：正如史蒂夫在评论中提到的那样，导致你的样式表中定义的最后一个类“获胜”（因为它们都具有相同的特异性），这就是为什么你的原始代码能够“起作用” “，因为悬停元素的顺序与样式表中这些类的顺序相匹配。

您需要从所有元素中删除当前设置的类 - 您只需使用相同的选择器，

$('#red').mouseover(function(){
    $("#content, nav div").removeClass();
    $("#content, nav div").not(this).addClass("red");
});

http://jsfiddle.net/8bchybrr/2/

然后你不妨将其缩短为

$("#content, nav div").removeClass().not(this).addClass("red");

http://jsfiddle.net/8bchybrr/4/

并且，由于您使用id值作为类名，您可以将整个事项缩短为

$(document).ready(function(){
    $('nav div').mouseover(function(){
        $("#content, nav div").removeClass().not(this).addClass($(this).attr('id'));
    });
    $("#clear").mouseover(function(){
        $("#content, nav div").removeClass();
    });
});

http://jsfiddle.net/8bchybrr/6/

Answer 2

您的问题是您没有删除以前的所有课程。它们堆叠起来，只有当您再次悬停在每个上方时才会清空。以下是实现您想要的更简洁的方法：

$(function(){
    function changeColor(el, className) {
        $("#content, nav div").removeClass()
                              .not(el)
                              .addClass(className);
    }

    $('#red').mouseover(function(){
        changeColor(this, 'red');
    });
    $("#blue").mouseover(function(){
        changeColor(this, 'blue');
    });
    $("#yellow").mouseover(function(){
        changeColor(this, 'yellow');
    });
    $("#black").mouseover(function(){
        changeColor(this, 'black');
    });
    $("#clear").mouseover(function(){
        $("#content, nav div").attr('class', '');
    });
});

编辑：根据史蒂夫的评论，您看到此问题的技术原因是因为您的样式表中列出了类的顺序。最后一个类是应用的颜色，直到应用了表中较低的另一个类或者删除了覆盖其他类的类。

我还更新了使用removeClass()的答案，而不是手动清除属性。

Answer 3

试试这个..你需要在添加课程之前清除以前的课程

$(document).ready(function(){
    $('#red').mouseover(function(){
        $("#content, nav div").removeClass();
        $("#content, nav div").not(this).addClass("red");
    });
    $("#blue").mouseover(function(){
       $("#content, nav div").removeClass();
        $("#content, nav div").not(this).addClass("blue");
    });
    $("#yellow").mouseover(function(){
        $("#content, nav div").removeClass();
        $("#content, nav div").not(this).addClass("yellow");
    });
    $("#black").mouseover(function(){
        $("#content, nav div").removeClass();
        $("#content, nav div").not(this).addClass("black");
    });
    $("#clear").mouseover(function(){
        $("#content, nav div").removeClass();
    });
});

Answer 4

在添加课程之前，您需要清除所有课程（$("#content, nav div").removeClass();）。请参阅此更新Fiddle。

我把它分成了自己的函数clearClass()，因为这是一项常见的任务。

Answer 5

你的问题在这一行：

$(this).add("#content").removeClass();

这是一个DEMO：http://jsfiddle.net/8bchybrr/5/

 $(document).ready(function(){
        $('#red').mouseover(function(){
            $("#content, nav div").removeClass().not(this).addClass("red");
        });
        $("#blue").mouseover(function(){
            $("#content, nav div").removeClass().not(this).addClass("blue");
        });
        $("#yellow").mouseover(function(){
            $("#content, nav div").removeClass().not(this).addClass("yellow");
        });
        $("#black").mouseover(function(){
            $("#content, nav div").removeClass().not(this).addClass("black");
        });
        $("#clear").mouseover(function(){
            $("#content, nav div").removeClass();
        });
    });

jquery脚本只能正确地工作一个方向

5 个答案: