jquery - 显示特定 URL 路径的 div

Question

我有一个网站，我需要为网站中的每个唯一页面（大约 25 页）显示特定的标题 div。我创建了一组变量和一个很长的 if else 语句（下面简化了 - 但运行了大约 25 个 if 语句深度）来运行该函数。该功能运行良好，但我遇到了大约 8 个页面无法运行的问题。

问题：有没有比运行 if else 语句更好的方法来实现这一点？

基本代码：

<div style="background: url(/image1.jpg)" class="landing hide"></div>
<div style="background: url(/image2.jpg)" class="information hide"></div>
<div style="background: url(/image3.jpg)" class="bell hide"></div>


var landing = "/home";
var information = "/information";
var bell = "/information/bell";

$(function(){
    if (location.pathname.search(landing)!=-1){
        $('.landing').show();
    } else {
       if (location.pathname.search(information)!=-1){
           $('.information').show();
       } else {
       if (location.pathname.search(bell)!=-1){
           $('.bell').show();
           } else {
               $('.landing').show();
           }
       }
    }
});

Answer 1

您可以创建一个数组routes。

var routes = {
  "landing": {
    "classname": ".landing",
    "pathname": /^\/home/
  },
  "information": {
    "classname": ".information",
    "pathname": /^\/information/
  },
  ...
};

$(function(){
  for(route in routes){
    if(routes.hasOwnProperty(route)){
      if(window.location.pathname.match(routes[route].pathname) != -1) {
        $(routes[route].classname).show();
      }
    }
  }
});

注意route.pathname是正则表达式。前缀^字符意味着路径名需要以给定的字符串开头。