在Jquery中，我如何使用if/else與window.location.pathname.indexOf？

Question

我有一個網站被分成4個子類別。每個類別都包含我想根據父類別進行更改的html文件。基本上，我想讓jquery讀取HTML文檔的文件夾名稱，並根據名稱啓動一個腳本。我想每個類別爲指向其他類（我爲什麼我需要單獨的類別），我對這個代碼解析：

$(document).ready(function() { 
 
    $('.workopen').click(function(e) { 
 
    $(this).siblings('.open').addBack().toggleClass('open'); 
 
    e.stopPropagation(); 
 
    }); 
 

 
    if (window.location.pathname.indexOf("firstcategory") > -1) { 
 
    $('.work .workopen .four').siblings('.open').addBack().toggleClass('open') 
 
    $('.one .inner2, .two .inner2, .three .inner2').hide(); 
 
    $('.etc').css("text-decoration", "underline"); 
 
    } 
 
});

它不正是我想要的！但一次只能在一個類別上工作（firstcategory）。我的問題是：我可以寫一個if/else語句來讓我改變三個類別嗎？或者我必須寫4個獨立的JS文件？

Answer 1

首先要將路徑名變成一個變量。然後你可以簡單地使用一系列if-else陳述。

var pathName = window.location.pathname; 

if (pathName.indexOf("firstcategory") > -1) { 
    // what you want to show/hide 
} else if (pathName.indexOf("secondcategory") > -1) { 
    // what you want to show/hide 
} else if (pathName.indexOf("thirdcategory") > -1) { 
    // what you want to show/hide 
} else if (pathName.indexOf("fourthcategory") > -1) { 
    // what you want to show/hide 
} 

我會建議給每個要應用它的操作添加一個類。元素可能有多個類:)

Answer 2

javascript中的switch聲明是針對您的情況量身定製的。這裏的策略：提取匹配的「firstcategory」，「secondcategory」等一個window.location.pathname的一部分，正則表達式，並使用switch語句：

$(document).ready(function() { 
    $('.workopen').click(function(e) { 
    $(this).siblings('.open').addBack().toggleClass('open'); 
    e.stopPropagation(); 
    }); 
    var matches = /(first|second|third|fourth)category/.exec(window.location.pathname);  
    switch (matches[0]){ 
    case 'firstcategory': 
     $('.work .workopen .four').siblings('.open').addBack().toggleClass('open') 
     $('.one .inner2, .two .inner2, .three .inner2').hide(); 
     $('.etc').css("text-decoration", "underline"); 
     break; 
    case 'secondcategory': 
     // second category stuff 
     break; 
    case 'thirdcategory': 
     // third category stuff 
     break; 
    case 'fourthcategory': 
     // fourth category stuff 
     break; 
    } 
});