多个链接用jQuery替换文本出错答案

【问题标题】：Replacing text with jQuery goes wrong with multiple links多个链接用jQuery替换文本出错
【发布时间】：2018-09-24 11:20:39
【问题描述】：

我在链接列表中使用以下代码根据用户指向的语言翻译其标题。例如，如果用户指向中文图标，“文章标题”将被替换为其中文版本。鼠标关闭时，标题会恢复为英文。这工作得很好。

我遇到问题的地方：有时我需要在同一行的“文章标题”之后添加另一个链接。每当我这样做时，脚本就会恐慌并在空白和默认之间滑动标题，因为它正在寻找一个链接，但它并没有告诉它改变任何东西。

如何向该脚本添加例外？如何让它检查链接是否有“foo”类，如果有，请忽略它？

$.each($("li"), function(i, elements) {
        var links = elements.getElementsByTagName("a");
        var article_title = elements.getElementsByClassName("article-title")[0];
        $.each(links, function(j, link) {
            var previous_title = article_title.innerHTML;
            link.addEventListener("mouseover", function() {
                $(article_title).fadeTo(200, 0.5, function(){
                    article_title.innerHTML = link.title;
                    $(article_title).fadeTo(200, 1, function(){});
                });
            });
            link.addEventListener("mouseout", function() {
                $(article_title).fadeTo(300, 0.5, function(){
                    article_title.innerHTML = previous_title;
                    $(article_title).fadeTo(300, 1, function(){});
                });
            });
        });
    });

【问题讨论】：

标签： javascript jquery text dynamic replace

【解决方案1】：

jQuery 有一个名为hasClass(className) 的内置函数。只需使用它来查看a 元素是否具有该特定类。

$.each($("li"), function(i, elements) {
        var links = elements.getElementsByTagName("a");
        var article_title = elements.getElementsByClassName("article-title")[0];
        $.each(links, function(j, link) {
            var previous_title = article_title.innerHTML;
            if (!$(link).hasClass("foo")) {
                link.addEventListener("mouseover", function() {
                    $(article_title).fadeTo(200, 0.5, function(){
                        article_title.innerHTML = link.title;
                        $(article_title).fadeTo(200, 1, function(){});
                    });
                });
                link.addEventListener("mouseout", function() {
                    $(article_title).fadeTo(300, 0.5, function(){
                        article_title.innerHTML = previous_title;
                        $(article_title).fadeTo(300, 1, function(){});
                    });
                });
            }
        });
    });

只需将上面示例中的类“foo”替换为您希望忽略的链接的实际类名。

【讨论】：

非常干净的解决方案！非常感谢您的帮助。