Question

我想要实现的目标： 基于URL（即foo.com/item1），div元素“logoswap”接收不同的类。

以下是我放在一起的代码，但似乎完全错误。我不是一个JS专业人士，XHTML / CSS更多是我的速度（一些PHP）...我不能使用PHP，即使它可以在PHP中（我知道这是因为我有一个PHP版本的我已经做了什么，但我不能正确地调用PHP。

我真的只是试图根据目录/网址显示不同的徽标...它不一定是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;
  };
})()

我只想在这里花一点时间鼓励任何正在这样做的人习惯常用的代码类型表达并学习它们。他们是远方最常用的跨语言是我发展的一部分库。

Answer 2

你所拥有的东西没有任何问题。你可以用下面的东西来整理它。

$(function() {
    var url = location.pathname;
    var logo = document.getElementById("logoswap");
    var i = 6;

    logo.className = "class1";

    while(i--)
    {
        if(url.indexOf("item" + i) > -1) {
            logo.className = "class" + i;
        }
    }
});

希望这有帮助。

Answer 3

只使用HTML / CSS，您可以将id添加（或通过javascript添加到）页面的body：

<body id="item1">

然后在CSS中创建一个选择器：

#item1 #logoswap {
    // class1 CSS
}

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

3 个答案:

按URL路径名

CSS设置

没有jQuery