Javascript jquery脚本只能在一个方向上正常工作

我正在使用一个简单的脚本，根据悬停在上面的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，它展示了整个过程：

谢谢。。。而且，我知道这个JS非常难看而且效率低下。除了创建另一个调用冗余部分的函数外，我不知道如何使其更加简洁

--

回答-我只需要补充一下：

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

---

对于每个函数，否则类将建立并冲突。现在看起来有点傻。。。我以为我在这么做，但绝对不是。谢谢

您的问题是没有删除以前的所有课程。它们正在堆积，只有当你再次悬停在它们上面时，它们才会被清除。以下是一种更简洁的方法来实现您的需求：

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

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

---

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

您的问题是没有删除以前的所有类。它们正在堆积，只有当你再次悬停在它们上面时，它们才会被清除。以下是一种更简洁的方法来实现您的需求：

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

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

---

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

试试这个。。在添加类之前，需要清除以前的类

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

---

试试这个。。在添加类之前，需要清除以前的类

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

---

您需要清除所有类$content，nav div.removeClass；在添加类之前。查看此更新

---

由于它是一个常见的任务，所以我将它划分为自己的函数clearClass

您需要清除所有类$content，nav div.removeClass；在添加类之前。查看此更新

---

由于它是一个常见的任务，所以我将它划分为自己的函数clearClass

问题在于，您只是从mouseover元素和内容中删除类，而不是从所有其他元素中删除类，因此不同颜色的类会继续“堆积”

编辑：正如Steve在评论中提到的，这导致样式表中定义的最后一个类“获胜”，因为它们都具有相同的特性，这就是为什么在原始代码中它“顺其自然”工作的原因，因为元素的悬停顺序与样式表中这些类的顺序相匹配

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

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

然后你最好把这个缩短到

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

而且，因为您使用id值作为类名，所以您最好将整个过程缩短为

---

问题是，您只是从mouseover元素和内容中删除类，而不是从所有其他元素中删除类，因此不同颜色的类会继续“堆积”

编辑：正如Steve在评论中提到的，这导致样式表中定义的最后一个类“获胜”，因为它们都具有相同的特性，这就是为什么在原始代码中它“顺其自然”工作的原因，因为元素的悬停顺序与样式表中这些类的顺序相匹配

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

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

然后你最好把这个缩短到

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

而且，因为您使用id值作为类名，所以您最好将整个过程缩短为

---

您在这方面的问题：

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

下面是一个演示：

---

您在这方面的问题：

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

下面是一个演示：

---

+我的回答很好。你能编辑你的答案来添加问题中的代码以任何样式应用的顺序工作，而不一定是一条直线。太好了！几乎每个答案都是正确的，但这绝对是最正确的elegant@SteveClanton对不起，我不明白你的意思？我想“下线”OP的意思是，它只在你从上到下悬停在div上时起作用，而不是相反。这个解决方案应该以您在元素上悬停的任何顺序工作，不是吗？是的，您的是。我说的原因是

---

最后一点是，当多个类被添加到元素中时，获胜规则是样式中的最后一个规则。如果某事物同时具有黑色和黄色两类，则背景色为：黑色；由于特殊性而被应用。@SteveClanton:将您的提示编辑到答案中，谢谢。+1回答很好。你能编辑你的答案来添加问题中的代码以任何样式应用的顺序工作，而不一定是一条直线。太好了！几乎每个答案都是正确的，但这绝对是最正确的elegant@SteveClanton对不起，我不明白你的意思？我想“下线”OP的意思是，它只在你从上到下悬停在div上时起作用，而不是相反。这个解决方案应该以您在元素上悬停的任何顺序工作，不是吗？是的，您的是。我的意思是，它之所以能够成功，是因为当多个类被添加到元素中时，获胜规则是样式中的最后一条规则。如果某事物同时具有黑色和黄色两类，则背景色为：黑色；由于特殊性而应用。@SteveClanton:将您的提示编辑到答案中，谢谢。