1

В общем ситуация такова, на странице имеется 3 блока, в каждом из них средствами php + mysql добавлена своя дата:

<div class="block">
    <div class="post-date" data-day="24.08.2016">
        <span>24</span>
        <span>Авг</span>
    </div>
    <div>Сегодня</div>
    <div>Завтра</div>
</div
<div class="block">
    <div class="post-date" data-day="18.08.2016">
        <span>18</span>
        <span>Авг</span>
    </div>
    <div>Сегодня</div>
    <div>Завтра</div>
</div
<div class="block">
    <div class="post-date" data-day="02.08.2016">
        <span>02</span>
        <span>Авг</span>
    </div>
    <div>Сегодня</div>
    <div>Завтра</div>
</div

Не могу сделать так, что если дата указанная в блоке совпадает с текущей датой, то блок с надписью "Сегодня" принимает значение dispaly: block, а блок с классом "post-date" принимал значение dispaly: none. Аналогичная ситуация, и с блоком "Завтра" - если до даты указанной остается один день то отображается блок "Завтра". А если до текущей даты больше двух дней, то ничего не происходит(надпись "Сегодня" или "Завтра" не отображаются)...

Пробовал сделать наброски, но что то не получается, помогите пожалуйста! С уважением! Олег.

var d = 1;
var now = new Date();
var day = now.getDate();// текущий день
var month = now.getMonth(); // текущий месяц
var tomorrowDate = day+d; // день для отражения блока - "завтра"
var datomorrowDate = day+d+d; // дни при которых ничего не надо отображать

var x = document.querySelectorAll(".post-date");
var d = 1;
for (var i = 0; i < x.length; i++) {
     var eventDate = x[i].data('day'); // не могу вытащить значение даты блока:(((
}
1
  • .data() - функция jQuery. Вы используете jQuery? Если нет, то вам нужно использовать .getAttribute('data-day')
    – Dmitry
    18 июл 2016 в 1:15

1 ответ 1

1

var now = new Date();
var today = ('0' + now.getDate()).slice(-2) + '.' + ('0' + (now.getMonth()+1)).slice(-2) + '.' + now.getFullYear();
var nextDate = new Date(now.setDate(now.getDate() + 1));
var tomorrow = ('0' + nextDate.getDate()).slice(-2) + '.' + ('0' + (nextDate.getMonth()+1)).slice(-2) + '.' + nextDate.getFullYear();


var events = document.querySelectorAll(".post-date");
for(var i = 0; i < events.length; i++) {
	var eventDate = events[i].getAttribute('data-day');
	if(eventDate == today) {
		events[i].parentNode.querySelector('.today').style.display = 'block';
	}
	if(eventDate == tomorrow) {
		events[i].parentNode.querySelector('.tomorrow').style.display = 'block';
	}
}
.block {
  border: 1px solid black;
  margin: 5px;
}

.post-date {
  display: block;  
}

.today, .tomorrow {
  display: none;
}
<div class="block">
    <div class="post-date" data-day="19.07.2016">
        <span>19</span>
        <span>Июля</span>
    </div>
    <div class="today">Сегодня</div>
    <div class="tomorrow">Завтра</div>
</div>
<div class="block">
    <div class="post-date" data-day="18.07.2016">
        <span>18</span>
        <span>Июля</span>
    </div>
    <div class="today">Сегодня</div>
    <div class="tomorrow">Завтра</div>
</div>
<div class="block">
    <div class="post-date" data-day="02.08.2016">
        <span>02</span>
        <span>Августа</span>
    </div>
    <div class="today">Сегодня</div>
    <div class="tomorrow">Завтра</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.