根據星期幾使頁面上的文本變為粗體

Question

我在網站上有景點的開放時間，所以我希望它開放，因此文本會以粗體顯示，具體取決於當天。 因此，如果是星期二，則“星期二上午10點至下午4點”將以粗體顯示。 我設法使它適用於一個景點div，但是它不適用於其他景點div，我不確定為什么。

網站：explorcanterbury.co.uk（要查看divs搜索或單擊canterbury大教堂和westgate，您會看到canterbury大教堂的作品，而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&amp;text=Product+Main"></div>
                                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&amp;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&amp;text=Product+Image+5"></div>
                                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&amp;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&amp;text=Product+Main"></div>
                                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&amp;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&amp;text=Product+Image+5"></div>
                                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffcc/000&amp;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");

Answer 1

嘗試設置類而不是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中重復，這可能會引起麻煩

Answer 2

您可以完全刪除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');