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

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

您的“存在”變量會為每個項目重新初始化。 那就是問題所在。 請改用以下代碼：

    $(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

嘗試這個：

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