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

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

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

Answer 2

你的问题背后的原因是你有多个锚<a>，如果你在循环中添加这些条件，一些或另一个将满足if()或else。

exists应位于每个循环之外。在遍历元素之后，即在循环之外，您需要检查是否没有元素与title匹配。

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

Answer 3

你的存在＆＃39;变量为每个项目重新初始化。这就是问题所在。请改用此代码：

    $(document).ready(function () {
    var title = $(document).attr("title");
    var exists = false;
    $(".menu li a").each(function (e) {
        var a = $(this).text();

         if(title.match(a))
         {
         exists = true;
         return false;
         }
       });
    if (exists) {
      $(this).addClass("active");
     } 
     else {
      $(".menu li a").first().addClass("active");
     }
});

Answer 4

试试这个：

＆＃13;

$(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");             
        } 
    });
    $(".menu li:first-child a").addClass("active")  
});

＆＃13;

jQuery if和else语句都在执行

4 个答案: