我从另一个关于 SO 的问题中借用了一些代码，因为我找不到可以实现我想要实现的目标的脚本。
我想做的是根据分配的日期突出显示当前事件，以下代码不适用于 <td>。表格内的元素，一个 <div> , 或 <p>元素。
我还想将高亮应用到任何同名的 ID，我现在拥有的可以吗？
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style>
body {padding: 20px; font-family: sans-serif;}
p {margin-top: 80px; font-size: 11px;}
.active {color: hotpink;
background:#000;
font-weight:bold;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var TODAY = new Date();
//Individual dates could be organized as objects, but using arrays below seems to be more readable and tidy
var SCHEDULE = {
'some-class': ['May 5 2011', 'June 5 2011'],
'some-class-a': ['May 5 2012', 'June 5 2012'],
'some-class-b': ['May 10 2012', 'June 10 2012'],
'some-class-c': ['December 15 2012', 'December 31 2012'],
'some-class-d': ['May 20 2012', 'June 20 2012'],
'some-class-e': ['December 15 2012', 'December 31 2012']
};
for (var events_ in SCHEDULE) {
console.log('checking ' + events_ + ', dates have to be within the ' + SCHEDULE[events_] + ' range');
if (TODAY >= Date.parse(SCHEDULE[events_][0]) && TODAY <= Date.parse(SCHEDULE[events_][1])) {
console.log(events_ + ' is currently in session!');
document.getElementById(events_).classList.add('active');
}
}
});//]]>
</script>
</head>
<body>
<ul>
<li id="some-class">Event 1</li>
<li id="some-class-a">Event 2</li>
<li id="some-class-b">Event 3</li>
<li id="some-class-c">Event 4</li>
<li id="some-class-d">Event 5</li>
<li id="some-class-e">Event 6</li>
</ul>
<p id="some-class-e">Current event here text</p>
<div id="some-class-e">Current event here, more text</div>
<table id="events" border="1">
<tr>
<td>Event 1 (May 16 - Dec 1)</td>
</tr>
<tr>
<td>Event 2 (May 31 - June 1)</td>
</tr>
<tr>
<td id="some-class-e">Current Event (December 15 - December 31)</td>
</tr>
</table>
</body>
</html>
最佳答案
首先，ID 必须是唯一的，通过使用 document.getElementById，您只会获取一个。
如果您想多次使用相同的标识符(例如，some-class-e)，您需要使用类名。
您可以使用 document.getElementsByClassName 按类名获取所有元素，然后将 active 类名应用于它。
<ul><li class="some-class-e">Event 6</li></ul>
<p class="some-class-e">Current event here text</p>
<div class="some-class-e">Current event here, more text</div>
var matches = document.getElementsByClassName(events_);
for(var i = 0; i < matches.length; ++i){
matches[i].classList.add('active');
}
更新
一个 jQuery 变体:
$.each(SCHEDULE, function(classname, dates) {
if (TODAY >= Date.parse(dates[0]) && TODAY <= Date.parse(dates[1])) {
$("." + classname).addClass("active");
}
});
关于javascript - 如何根据当前事件日期突出显示元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13958679/