基于 URL 的 ID 更改类别 - 基于 URL 的图像交换 -

Question

我想要达到的目标： 根据 URL（即 foo.com/item1），div 元素“logoswap”接收不同的类。

以下是我整理的代码，但似乎完全错误。我无论如何都不是 JS 专业人士，XHTML/CSS 更适合我的速度（一些 PHP）......我不能使用 PHP，即使在 PHP 中是可能的（我知道这是因为我有一个 PHP 版本我需要做的事情，但我无法正确调用 PHP。

我真的只是想根据目录/url 显示不同的徽标...它不一定是 CSS 类调用的背景元素，我只需要不同的图像根据上述 url 变量加载...

  $(function() {
  var url = location.pathname;

  if(url.indexOf('item1') > -1) {
    document.getElementById("logoswap").className += " class1";
   }

  elseif(url.indexOf('item2') > -1) {
    document.getElementById("logoswap").className += "class2";
   }

  elseif(url.indexOf('item3') > -1) {
    document.getElementById("logoswap").className += "class3";
   }

  elseif(url.indexOf('item4') > -1) {
    document.getElementById("logoswap").className += "class4";
   }

  elseif(url.indexOf('item5') > -1) {
    document.getElementById("logoswap").className += "class5";
   }

  else {
    document.getElementById("logoswap").className += "class1";
   }

  });

这就是我所拥有的……丑，我敢肯定。

这就是我在这里的原因，我肯定需要一些帮助。

Answer 1

通过 URL 路径名分配 CSS 类

jsfiddle 已设置为 这个解决方案。

这是一个使用数字表达式（如果可用）的案例。这不适用于上述问题。

$(function() {
  var rgx = /item(\d+)$/,
      url = location.pathname,
      id = (rgx.test(url)) ? url.match(rgx)[1] : '1';
  $("#logoswap").addClass("class" + id);
});

更新：

鉴于新的细节，您可能需要一个值数组，这些值应派生自或完全等于您打算使用的类名。

$(function(){
  // my favorite way to make string arrays.
  var matches = "brand1 brand2 brand3".split(" "),
      url = location.pathname.match(/\w+$/)[0], // get the last item
      id = matches.indexOf(url),
      className = matches[(id > -1) ? id : 0];
  $("#logoswap").addClass(className);
});

要完成这项工作，您需要准备一些东西。我将假设路径将以我们在此处概述的数字结尾。默认以1 结尾。您将需要可访问图像。您需要为每种可能性定义样式。

---

CSS 设置

#logoswap {
  height : 200px;
  width : 200px;
}
.class1 {
  background-image : url(/path/to/default.jpg);
}
.class2 {
  background-image : url(/path/to/second.jpg);
}
.brand1 {
  background-image : url(/path/to/brand/1/logo.jpg);
}
...

---

没有 jQuery

​​>

如果您的代码中没有 jQuery，您可能需要使用 window.onload。

(function(){
  var old = window.onload;
  window.onload = function(){
    old();
    var r = /item(\d+)$/,
        url = location.pathname,
        id = (r.test(url)) ? url.match(r)[1] : '1';
    document.getElementById('logoswap').className += "class" + id;
  };
})()

我只想在这里花点时间 鼓励任何这样做的人 习惯于常规的代码类型 表达式并学习它们。他们是 遥遥无期最常用的 我发展的跨语言部分 兵工厂。