我在我的网站上有开放时间的景点，我想要它，所以文字是粗体，取决于它是哪一天。因此，如果是星期二，'星期二上午10点 - 下午4点'将以粗体显示。我已经设法让这个为一个吸引力div工作，但它不适用于任何其他吸引力的divs，我不知道为什么。
网站：explorecanterbury.co.uk（查看divs搜索或点击坎特伯雷大教堂和westgate，你可以看到坎特伯雷大教堂的作品，但是westgate没有）。
HTML
<div class="info-div col-md-5 col-xs-6" id="CDiv" style="background-color:orange;">
<div class="close" onclick="hide('CDiv')"><span class="close-btn"></spam></div>
<div class="content col-md-10">
<h2 class="subtitle">Canterbury Cathedral</h1>
<img src="images/test.jpg" class="img-responsive">
<p>St Augustine, the first Archbishop of Canterbury, arrived on the coast of Kent as a missionary to England in 597 AD. He came from Rome, sent by Pope Gregory the Great.</p>
<h2 class="subtitle">Find out more...</h1>
<ul id="shareMenu">
<li class="shareLi"><span class="webIcon"></span></li>
<li class="shareLi"><span class="fbIcon"></span></li>
<li class="shareLi"><span class="twitterIcon"></span></li>
<li class="shareLi"><span class="instaIcon"></span></li>
</ul>
<h2 class="subtitle">Opening Times</h2>
<ul style="list-style: none; padding: 0px;">
<li><span class="weekday" id="1">Monday: 9am - 5.30pm</span></li>
<li><span class="weekday" id="2">Tuesday: 9am - 5.30pm</span></li>
<li><span class="weekday" id="3">Wednesday: 9am - 5.30pm</span></li>
<li><span class="weekday" id="4">Thursday: 9am - 5.30pm</span></li>
<li><span class="weekday" id="5">Friday: 9am - 5.30pm</span></li>
<li><span class="weekday" id="6">Saturday: 9am - 5.30pm</span></li>
<li><span class="weekday" id="0">Sunday: 12.30pm - 2.30pm</span></li>
</ul>
<h2 class="subtitle">Related Attractions</h1>
<div class="col-sm-6 col-md-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Main"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+2"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
</div>
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="info-div col-md-5 col-xs-6" id="WDiv" style="background-color:orange;">
<div class="close" onclick="hide('WDiv')"><span class="close-btn"></spam></div>
<div class="content col-md-10">
<h2 class="subtitle">Westgate Towers</h1>
<img src="images/test.jpg" class="img-responsive">
<p>The Westgateis a medieval gatehouse in Canterbury,Kent, England. This 60-foot high western gate of the city wall is the largest surviving city gate in England. Built of Kentish ragstone around 1379, it is the last survivor of Canterbury's seven medieval gates, still well-preserved and one of the city's most distinctive landmarks. The Tower is a scheduled ancient monument and Grade I listed. Visitors can explore its rich history and take in the spectacular views of the city from the battlements viewpoint.</p>
<h2 class="subtitle">Find out more...</h1>
<ul id="shareMenu">
<li class="shareLi"><span class="webIcon"></span></li>
<li class="shareLi"><span class="fbIcon"></span></li>
<li class="shareLi"><span class="twitterIcon"></span></li>
<li class="shareLi"><span class="instaIcon"></span></li>
</ul>
<h2 class="subtitle">Opening Times</h2>
<ul style="list-style: none; padding: 0px;">
<li><span class="weekday" id="1">Monday: 11am - 4pm</span></li>
<li><span class="weekday" id="2">Tuesday: 11am - 4pm</span></li>
<li><span class="weekday" id="3">Wednesday: 11am - 4pm</span></li>
<li><span class="weekday" id="4">Thursday: 11am - 4pm</span></li>
<li><span class="weekday" id="5">Friday: 11am - 4pm</span></li>
<li><span class="weekday" id="6">Saturday: 11am - 4pm</span></li>
<li><span class="weekday" id="0">Sunday: 11am - 4pm</span></li>
</ul>
<h2 class="subtitle">Related Attractions</h1>
<div class="col-sm-6 col-md-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Main"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+2"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/612b65/fff&text=Product+Image+5"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&text=Product+Image+6"></div>
</div>
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.highlight {
font-weight:bold;
}
JS
var today = new Date().getDay();
$("#" + today).addClass("highlight");
答案 0 :(得分：4)
尝试设置类而不是id。
<span class="weekday d1">
<span class="weekday d2">
<span class="weekday d3">
等
var today = new Date().getDay();
$(".d" + today).addClass("highlight");
id = 1在你的html中重复，这可能会导致麻烦
答案 1 :(得分：0)
您可以完全删除id标记，并使用:nth-of-type突出显示正确的行。这种方法会突出显示两组列表的正确日期。
HTML
<li><span class="weekday"></span></li>
<li><span class="weekday"></span></li>
<li><span class="weekday"></span></li>
JS
var date = new Date();
var dayOfWeek = date.getDay();
$('li:nth-of-type(' + dayOfWeek + ')').find('.weekday').addClass('highlight');