0

I am working on a website where I dont have any control on the code (functionality side. however even if I had the access I wouldn't be able to make any changes as I am a front end designer not a coder..lol). The only changes I can make is CSS, js.

What I am tring to do:

I got the url on the page like this:

www.test.com/#box1#box3#box5

(I am not sure if I can have more than one ID in a row. please advice. However thats how the developer has done it and I dont mind as there are no issues yet)

the page html 

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>

I would like to take different ids from the URl and use it to hidhlight the divs with that ID (by addding a class name "highlight")

The result should be like this:

<div id="box1 highlight"></div>
<div id="box2"></div>
<div id="box3 highlight"></div>
<div id="box4"></div>
<div id="box5 highlight"></div>

I would like to learn the smart way of taking just the id numbers from the url and use it to select the div with that paticulat no.

just a quick explanation:

var GetID = (get the id from the URL)

$('#box' + GetID).addClass('highlight');
JackWhiteIII
  • 1,388
  • 2
  • 11
  • 25
iSqware
  • 156
  • 7
  • 1
    only one hash is read if you use window.hash . After that you can split them at # into an array . Run a loop through the array and you have your ids – Lau Jun 17 '15 at 09:10
  • http://stackoverflow.com/questions/298503/how-can-you-check-for-a-hash-in-a-url-using-javascript – Sam Jun 17 '15 at 09:10
  • 1
    Do you or don't you want to use jQuery (as mentioned in your title)? – putvande Jun 17 '15 at 09:11
  • 2
    FYI, regarding RFC, this `www.test.com/#box1#box3#box5` isn't valid URL – A. Wolff Jun 17 '15 at 09:15
  • A. Wolff, So are you saying that its not good to use the "www.test.com/#box1#box3#box5" url like this? can you please tell me if there are any pros and cons – iSqware Jun 17 '15 at 09:37

4 Answers4

1

Try This...

var hashes =location.hash.split('#');
 hashes.reverse().pop();
 $.each(hashes , function (i, id) {
    $('#'+id).addClass('highlight');
   });

Working fiddle here

ANR Upgraded Version
  • 857
  • 16
  • 39
1

There are various way to resolve this issue in JavaScript. Best is to use "split()" method and get an array of hash(es).

var substr = ['box1','box2']

// Plain JavaScript
for (var i = 0; i < substr.length; ++i) {
    document.getElementById(substr[i]).className = "highlight"
}

//For Each
substr.forEach(function(item) {
    $('#' + item).addClass('highlight')
});

//Generic loop:
for (var i = 0; i < substr.length; ++i) {
    $('#' + substr[i]).addClass('highlight')
}

Fiddle - http://jsfiddle.net/ylokesh/vjk7wvxq/

Updated Fiddle with provided markup and added plain javascript solution as well -

http://jsfiddle.net/ylokesh/vjk7wvxq/1/

Lokesh Yadav
  • 1,574
  • 5
  • 23
  • 50
1
var ids = window.location.hash.split('#').join(',#').slice(1);
jQuery(ids).addClass('highlight');

or in plain JS:

var divs = document.querySelectorAll(ids);
[].forEach.call(divs, function(div) {
    div.className = 'highlight';
});
putvande
  • 15,068
  • 3
  • 34
  • 50
0
var x = location.hash;
var hashes = x.split('#');
for(var i=0; i< hashes.length; i++){
  var GetID = hashes[i];

  //with jQuery
  $('#box' + GetID).addClass('highlight');
  //with Javascript
  document.getElementById('box' + GetID).className = document.getElementById('box' + GetID).className + ' highlight';
}
Lau
  • 282
  • 3
  • 11