的jQuery /取決於

日

我試圖讓一個「開放時間」表中，突出了用戶的當前日期文本的JavaScript的變化顏色。的jQuery /取決於

HTML：

    <div id="Monday"> <h2> Mon</h2><h3>8am-9pm</h3></div> 
        <div id="Tuesday"> <h2> Tue</h2><h3>8am-9pm</h3></div> 
        <div id="Wednesday"> <h2> Wed</h2><h3>8am-9pm</h3></div> 
        <div id="Thursday"> <h2> Thu</h2><h3>8am-9pm</h3></div> 
        <div id="Friday"> <h2> Fri</h2><h3>8am-9pm</h3></div> 
        <div id="Saturday"> <h2> Sat</h2><h3>8am-9pm</h3></div> 
        <div id="Sunday"> <h2> Sun</h2><h3>8am-9pm</h3></div>

的jQuery /使用Javascript/Idon'tevenknowanymore：

var d=newDate(); 
var day=d.getDay(); 

if (day == 1) 
    { 
     document.getElementById('Monday').style.color='#DB35B0' 
    } 
else if (day == 2) 
    { 
     document.getElementById('Tuesday').style.color='#DB35B0' 
    } 
else if (day == 3) 
    { 
     document.getElementById('Wednesday').style.color='#DB35B0' 
    } 
else if (day == 4) 
    { 
     document.getElementById('Thursday').style.color='#DB35B0' 
    } 
else if (day == 5) 
    { 
     document.getElementById('Friday').style.color='#DB35B0' 
    } 
else if (day == 6) 
    { 
     document.getElementById('Saturday').style.color='#DB35B0' 
    } 
else if (day == 0) 
    { 
     document.getElementById('Sunday').style.color='#DB35B0' 
    }

麻煩的是，如果我要改變的CSS的顏色，我會用：

 #Friday h3 {color:#DB35B0;}

這似乎並不在JavaScript的這樣的工作：

 else if (day == 5) 
    { 
     document.getElementById('Friday h3').style.color='#DB35B0' 
    }

我也試過：

 else if (day == 5) 
    { 
     document.getElementById('Friday').children.style.color='#DB35B0' 
    }

但是什麼也沒做。

所以，我該怎麼辦？

是否有可能爲目標的div的兒童和改變自己的顏色？

來源

2012-02-24 Ampersand

您需要添加結束符document.getElementById（'Friday h3'）。style.color ='＃DB35B0'; – 2012-02-24 02:48:21

@COLD：不，分號是可選的。 'getElementById'不接受CSS選擇器。 – 2012-02-24 02:51:08

有時可以幫助 – 2012-02-24 02:51:38

是的，有各種方法來檢索後代元素（例如getElementsByTagName），但getElementById不接受CSS選擇器。爲什麼[...].children.style不工作的原因是.children返回NodeList，即節點集合。您必須遍歷它或使用所需節點的索引訪問它。

我提出一個不同的，更簡單的方法：

創建該顏色的CSS規則，使用類：

.today h3 { 
    color: #DB35B0; 
}

該類添加到當前的一天：

var days = ['Sunday', 'Monday', ..., 'Saturday'], 
    now = new Date(), 
    today = now.getDay(); 

document.getElementById(days[today]).className += ' today';

這是更少的代碼，您可以更輕鬆地更改樣式。

編輯：我剛纔看到你所標記與jQuery的問題。在這種情況下，你可以替換最後一行：

$('#' + today).addClass('today');

相較於DOM接口方法，如getElementById或getElementsByTagName，jQuery使用CSS選擇器來得到元素的引用。如果你打算使用它，你應該看看documentation。

來源

2012-02-24 02:45:04

你是國王。您的解決方案如此簡潔而有效。謝謝你的幫助。 – Ampersand 2012-02-24 02:55:29

既然你已經標記的jQuery對你的問題，你可以用這個替換所有代碼：

var day = (new Date()).getDay(); 
var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 

$("#" + daysOfTheWeek[day] + " h3").css("color", '#DB35B0');

或只設置爲今天的顏色的CSS規則：

.today h3 {color: #DB35B0;}

而且，當時使用此代碼：

var day = (new Date()).getDay(); 
var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 

$("#" + daysOfTheWeek[day]).addClass("today");

來源

2012-02-24 02:45:07 jfriend00

感謝您的建議 – Ampersand 2012-02-24 03:03:01

document.getElementById要求您使用的價值屬性獲取元素。你不能做document.getElementById('Friday h3')，只有document.getElementById('Friday')。

這裏有一個工作示例：

http://jsfiddle.net/fVtb6/

使用jQuery，你可以這樣做：

$('#Friday h3').css('color', 'red')

工作例如：

http://jsfiddle.net/fVtb6/1/

來源

2012-02-24 02:46:08

你需要穿過你的孩子。與jQuery這是一個班輪：

$("#Friday h3").css("color","#DB35B0");

在普通的JavaScript，你必須提供一個單一的ID來.getElementById()並將其返回給孤獨的匹配元素的引用（或者返回null如果沒有匹配的），但一旦你有您可以處理它的孩子，元素的引用：

var div = document.getElementById("Friday"), 
    i; 

for (i = 0; i < div.children.length; i++) 
    div.children[i].style.color = "#DB35B0"; 

// Or to just get the h3 child elements: 

var h3kids = div.getElementsByTagName("h3"); 
for (i = 0; i < h3kids.length; i++) 
    h3kids[i].style.color = "#DB35B0"; 

// Or, depending on which browsers you want to support (e.g., not IE7) 
// you can skip the getElementById step: 

var h3list = document.querySelectorAll("#Friday h3"); 
for (i = 0; i < h3list .length; i++) 
    h3list [i].style.color = "#DB35B0";

來源

2012-02-24 02:46:12 nnnnnn

喜歡的東西：

var day = (new Date()).getDay(); 
var ids = ['Sunday','Monday','Tuesday','Wednesday', 
      'Thursday','Friday','Saturday']; 
var colours = ['#DB35B0','#DB35B0', '#DB35B0', 
       '#DB35B0','#DB35B0','#DB35B0','#DB35B0']; 

document.getElementById(ids[day]).style.color = colours[day];

應該讓你開始。請注意，如果您將所有顏色設置爲相同的值，則顏色陣列不是必需的，但是您可能需要不同日期的不同顏色。

<style type="text/css"> 

    .today h3 { 
    color: #DB35B0; 
    } 

</style> 
<script> 

function doColours() { 
    var ids = ['Sunday','Monday','Tuesday','Wednesday', 
      'Thursday','Friday','Saturday']; 
    document.getElementById(ids[(new Date()).getDay()]).className = 'today'; 
} 
</script>

或（！但願不是）與文件撰寫：

var day = (new Date()).getDay(); 
var id = ['Sunday','Monday','Tuesday','Wednesday', 
      'Thursday','Friday','Saturday'][day]; 
var str = '<style type="text/css">' 
str += '#' + id + ' h3 { color: #DB35B0; }<\/style>'; 
document.write(str);

來源

2012-02-24 02:48:18 RobG

如果你使用jQuery，這將做到這

順便說一句，你可以用一個類來完成此但我也不是專家！

<style> 
.highlighted1{color:#ff0000;} 
</style> 
<div id="Monday" class="day1"> <h2> Mon</h2><h3>8am-9pm</h3></div> 
<div id="Tuesday" class="day2"> <h2> Tue</h2><h3>8am-9pm</h3></div> 
<div id="Wednesday" class="day3"> <h2> Wed</h2><h3>8am-9pm</h3></div> 
<div id="Thursday" class="day4"> <h2> Thu</h2><h3>8am-9pm</h3></div> 
<div id="Friday" class="day5"> <h2> Fri</h2><h3>8am-9pm</h3></div> 
<div id="Saturday" class="day6"> <h2> Sat</h2><h3>8am-9pm</h3></div> 
<div id="Sunday" class="day0"> <h2> Sun</h2><h3>8am-9pm</h3></div> 
<script language="javascript" type="text/javascript"> 
var day=new Date().getDay(); 
$(".day"+day+" h3").addClass("highlighted1"); 
</script>

來源

2012-02-24 03:09:51

的jQuery /取決於

回答

相關問題