Question

我正在一个网站上工作，我对代码没有任何控制权（功能方面。但即使我有访问权限，我也无法进行任何更改，因为我是前端设计师而不是coder..lol）。我能做的唯一改变是CSS，js。

我要做的事情：

我在页面上得到了这样的网址：

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

（我不确定我是否可以连续使用多个ID。请提供建议。但这就是开发人员如何做到这一点，我不介意，因为还没有问题）

页面html

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

我想从URl中获取不同的ID并使用它来隐藏具有该ID的div（通过添加类名＆＃34;突出显示＆＃34;）

结果应该是这样的：

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

我想学习从网址中获取id号码的智能方法，并使用它来选择具有该条件的div。

只是一个简单的解释：

var GetID = (get the id from the URL)

$('#box' + GetID).addClass('highlight');

Answer 1

试试这个...

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

Working fiddle here

Answer 2

在JavaScript中有多种方法可以解决此问题。最好是使用“split（）”方法并获取一个哈希数组。

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

小提琴 - http://jsfiddle.net/ylokesh/vjk7wvxq/

使用提供的标记更新了小提琴并添加了简单的JavaScript解决方案 -

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

Answer 3

var ids = window.location.hash.split('#').join(',#').slice(1);
jQuery(ids).addClass('highlight');

或简单的JS：

var divs = document.querySelectorAll(ids);
[].forEach.call(divs, function(div) {
    div.className = 'highlight';
});

Answer 4

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

从URL获取id号（分离）并使用它来选择具有该ID号的id（使用jquery）

4 个答案: