jQuery/javascript изменить цвет текста в зависимости от дня

Question

Я пытаюсь сделать таблицу «часов работы», которая выделяет текущий день для пользователя.

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' 
    } 

Но это ничего не делал.

И что мне делать?

Можно ли нацелить детей из разделов и изменить их цвет?

Answer 1

Да, существуют различные методы для извлечения элементов-потомков (например, 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, если вы собираетесь использовать его.

Answer 2

Поскольку вы добавили 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"); 

Answer 3

document.getElementById требует использовать значение id атрибут для получения элемента. Вы не можете сделать document.getElementById('Friday h3'), только document.getElementById('Friday').

Вот рабочий пример:

• http://jsfiddle.net/fVtb6/

Использование JQuery, вы можете сделать это:

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

Рабочий пример:

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

Answer 4

Вам нужно пройти свой путь через детей. С JQuery это один вкладыш:

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

В равнинных JavaScript вы должны предоставить единый идентификатор для .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"; 

Answer 5

Что-то вроде:

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> 

Или (! Упаси) с document.write:

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); 

Answer 6

Если вы используете 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>