Question

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.

Answer 1

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.