javascript - 在悬停时 : higlight all identical links to Wikipedia in one colour, 以不同颜色突出显示其他地方的所有相同链接

Question

我试图在悬停时突出显示所有指向维基百科的相同链接蓝色，而在其他地方所有相同的链接将在悬停时突出显示绿色。

维基百科部分，我使用以下 jQuery 代码进行管理:

$(function () {
    function getKey(element) {
        return element.href;}
    function sameGroupAs(element) {
        var key = getKey(element);
        return function () {
            return getKey(this) === key;}}
    $(document)
    .on("mouseenter", "a[href*=wikipedia]", function () {
        $("a").filter(sameGroupAs(this)).addClass("wikipedia");})
    .on("mouseleave", "a", function () {
        $("a").filter(sameGroupAs(this)).removeClass("wikipedia");});});

a.wikipedia{background-color: #A8c5ff}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Wikipedia: <a href="http://en.wikipedia.org/wiki/Experiential_learning">experiential learning</a>. And all <b>identical</b> links get higlighted at the same time. E.g.: the next occurence <a href="http://en.wikipedia.org/wiki/Experiential_learning">experiential learning</a> gets highlighted simultaneously.

至于非维基百科页面悬停时的绿色突出显示，我还在苦苦挣扎。

到目前为止我尝试了什么:

你可能会笑得很开心，因为我经验不足，但我会尝试展示我被卡住的地方:

我尝试再次复制代码，现在指定一个额外的条件...例如，尝试使用 jQuery :not()-selector例如，检查维基百科类的否定是否适用，

• $( "a[href]:not(:contains('wikipedia'))").css( "color", "green");

或者我尝试过类似的事情:

• “a:not([href*=wikipedia])”...

或者通过添加 ifWikipedia?->{nothing}else{green} 语句。

• if(!$(this).hasClass("wikipedia")){;nothing} else{addClass( "绿色");}

我尝试过的另一种选择(也没有成功，因为维基百科部分随后被否决，而我只想让维基百科部分优先):

• 复制代码，将 "a[href*=wikipedia]" 替换为 "a" 并为绿色添加一个类。然后，如果只有维基百科部分可以将其自身强加于一般的“a”，就可以实现预期的结果。

任何帮助将不胜感激(从这个初学者，你可以注意到)。

Answer 1

您可以通过组合使用 CSS 属性选择器并重新使用现有函数来实现这一点，但要使它们更通用。

DEMO

JavaScript:

function getKey(element) {
   return element.href;
}

function sameGroupAs(element) {
    var key = getKey(element);
    return function () {
        return getKey(this) === key;
    }
}

$(document).on("mouseenter", "a", function () {
    $("a").filter(sameGroupAs(this)).addClass("active");
}).on("mouseleave", "a", function () {
    $("a").filter(sameGroupAs(this)).removeClass("active");
});

然后是 CSS:

a[href*="wikipedia"].active {
   background:red;
}

a:not([href*="wikipedia"]).active {
   background:green;
}