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

Поскольку вы пометили 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 2

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

Answer 3

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

Answer 4

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

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 5

Тебе нужно пройти через детей. С 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 6

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/