4

達成したいことを実行するスクリプトが見つからなかったため、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>

jsFiddleデモ

4

1 に答える 1

7

まず第一に、IDsは一意である必要があり、document.getElementByIdあなたを利用することによって1つだけをフェッチします。

同じ識別子（たとえば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");
  }
});

どうぞ。

于 2012-12-19T18:37:42.817 に答える