javascript - jQuery if 和 else 语句都执行

Question

我有一个脚本，如果页面标题与 <a> 的文本值匹配，它将向元素添加一个类。标签。我的脚本中的 else 语句是在没有页面标题与导航项匹配且事件链接分配给 Home 时进行覆盖。菜单项(即导航栏中的第一个)。

我有一个像这样的菜单:

<ul class='menu'>
    <li> <a href="#">Home</a> </li>
    <!-- Page title - My Cool Website -->
    <li> <a href="#">About Us</a> </li>
    <!-- Page title - About Us -->
    // etc....
</ul>

这是脚本:

$(document).ready(function () {
    var title = $(document).attr("title");
    $(".menu li a").each(function (e) {
        var a = $(this).text();
        var exists = title.match(a);
        if (exists) {
            $(this).addClass("active");
        } else {
            $(".menu li a").first().addClass("active");
        }
    });
});

if 和 else 语句似乎正在执行，因此第一个元素和匹配的元素现在都有 active添加了类。

我尝试过使用stopPropagation();和return false在我的发言结束时，但没有成功。

谁能告诉我两者都执行的原因吗？我认为我没有优雅地跳过 DOM，但 javascript 有点生疏。

Answer 1

问题是你的每个循环，假设你在第二个 a 中找到了匹配，但每个循环仍然继续，所以第一个元素将再次获得类

$(document).ready(function () {
    var title = $(document).attr("title");
    var exists;
    $(".menu li a").each(function (e) {
        var a = $(this).text();
        exists = title.match(a);
        if (exists) {
            $(this).addClass("active");
            return false;
        }
    });
    if (!exists) {
        $(".menu li a").first().addClass("active");
    }
});