Question

我有一个网站，我需要为网站中的每个独特页面（大约25页）提供特定的标题div显示。我创建了一组变量和一个非常长的if else语句（简化如下 - 但运行大约25 if语句深）来运行该函数。该功能很有效，除了我有大约8个页面无法正常运行的问题。

问题：除了run-on 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是正则表达式。前缀^字符表示路径名需要以给定字符串开头。

显示特定URL路径的div

1 个答案: