基于URL的ID更改类别-基于URL的图片交换- [英] Class of ID Change based on URL - URL Based Image Swap -

问题描述

我要实现的目标: 基于URL(即foo.com/item1)，div元素"logoswap"将接收其他类.

What I'm trying to achieve: Based on URL (ie., foo.com/item1), the div element "logoswap" receives a different class.

以下是我编写的代码，但似乎完全错误.无论如何，我都不是JS专业人士，XHTML/CSS的速度更快(某些PHP)……即使在PHP中也可以使用PHP，但我无法使用PHP(而且我知道这是因为我有一个PHP版本)我已经完成了什么，但是无法正确调用PHP.

The following is the code I put together but it seems completely wrong. I'm not a JS pro by any means, XHTML/CSS is more my speed (some PHP)... I cannot use PHP, even if it is possible in PHP (and I know it is because I have a PHP version of what I need done already, but I can't call the PHP properly.

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

I'm really just trying to get a different logo to show up based on the directory/url... It doesn't have to be a background element called in by the CSS class necessarily, I just need a different image to load based on the aforementioned url variable...

  $(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";
   }

  });

这就是我所拥有的...我确定是丑陋的.

That's what I have... Ugly I'm sure.

这就是为什么我在这里，我确实需要一些帮助.

That's why I'm here though, I definitely need some help.

推荐答案

通过URL路径名分配CSS类

已设置了 jsfiddle 此解决方案.

A jsfiddle has been setup for this solution.

这里是使用数字表达式(如果可用)的情况.这不适用于上述问题.

Here is a case for using numeric expressions if they are available. This does not apply to the above question.

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

更新:

鉴于新的细节，您可能需要一个值数组，这些值应源自或与您打算使用的类名完全相同.

In light of the new details you may need an array of values, these should be derived from or exactly equal to the class names you intend to use.

$(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结尾.您将需要可访问这些图像.您需要为每种可能性定义样式.

To make this work you will need a few things in place. I will assume that the paths will end in a number as we have outlined here. The default ends with 1. You will need the images to be accessible. You need to define the styles for each possibility.

#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.

---

Without jQuery

if you do not have jQuery in your code you may need to use 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;
  };
})()

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

I just want to take a moment here to encourage anyone who is doing this type of code to get used to Regular Expressions and learn them. They are far and away the most frequently used cross language part of my development arsenal.

这篇关于基于URL的ID更改类别-基于URL的图片交换-的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！