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

发布于 2024-11-06 05:14:05 字数 1063 浏览 3 评论 0原文

我想要实现的目标： 根据 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";
   }

  });

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

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

原文

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

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

第七度阳光i 2024-11-13 05:14:05

通过 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;
  };
})()

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

Assigning CSS Class By URL Pathname

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);
});

UPDATE:

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);
});

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.

CSS Setup

#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);
}
...

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.

回复收藏 0 原文

飘然心甜 2024-11-13 05:14:05

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

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

希望这有帮助。

There's nothing that wrong with what you have. You could tidy it up with something like below.

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

Hope this helps.

回复收藏 0 原文