Я использую код Arg0n из добавить класс, если дата сегодня, который прекрасно работает! Мне было интересно, можно ли добавить только один класс, поэтому, если атрибут data-date равен сегодня, добавьте класс .active , иначе добавьте класс к предыдущей дате (следующей доступной дате данных). Таким образом, всегда будет выделен один элемент.

Дополнительной сложностью является iframe, который загружает html-файл активной даты.

Визуальная схема процесса может прояснить его

Надеюсь, любые решения помогут и кому-то еще. Любая помощь приветствуется.

$(document).ready(function(){

// Add class="active" to calendar archive
    var currentDate = Date.parse((new Date()).toLocaleDateString());

    $('.enewsarchive a').each(function(){
       var specifiedDate = $(this).data('date');
       var yr = $(this).data('date').substr(0,4);
       var mth = $(this).data('date').substr(5,2);
       var enewsurl = 'http://www.example.com/images/emails/' + yr + '/' + mth + '/' + specifiedDate + '.html';
       var tdate = Date.parse(specifiedDate);

        if (!isNaN(tdate) && tdate == currentDate){
            $(this).addClass('active'); // today
            $('#enews').attr('src',enewsurl); // change current iframe
        } else if (!isNaN(tdate) && currentDate - tdate > 0){
            $(this).addClass(''); // past dates
            $('#enews').attr('src',enewsurl);
        } else {
            $(this).addClass(''); // future
        }

    });

// Load iframe with archives
    $('.enewsarchive a').click(function(e){
        e.preventDefault();
        $('#enews').attr('src',$(this).attr('href'));
        $('.enewsarchive a.active').removeClass('active');
        $(this).addClass('active');
    });
});
.enewsarchivepost{float:left}
.enewsarchive .active .enewsarchivecalendar{background:#c00;color:#fff}
.enewsarchivecalendar{padding:10px;width:100px;background:#eee}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="enews">
    <div class="enewsiframe">
        <iframe src="http://www.example.com/enews/2018/03/2018-03-01.html" id="enews" width="940" height="auto" frameborder="0" scrolling="auto" style="border:none;"></iframe>
    </div>
    <div class="enewsarchive">
        <div class="enewsarchivepost">
            <a href="http://www.example.com/enews/2018/04/2018-03-01.html" data-date="2018-04-01" target="enews">
            <p class="enewsarchivecalendar">01<em>APR</em></p>
            </a>
        </div>
        <div class="enewsarchivepost">
            <a href="http://www.example.com/enews/2018/03/2018-03-14.html" data-date="2018-03-14" target="enews">
            <p class="enewsarchivecalendar">14<em>MAR</em></p>
            </a>
        </div>
        <div class="enewsarchivepost">
            <a href="http://www.example.com/enews/2018/03/2018-03-08.html" data-date="2018-03-08" target="enews">
            <p class="enewsarchivecalendar">08<em>MAR</em></p>
            </a>
        </div>
    </div>
</div>
0
Drebbin 14 Мар 2018 в 15:14

2 ответа

Лучший ответ

Попробуй это

$(document).ready(function(){
    today = new Date();
    today.setDate(today.getDate()+1);
    var currentDate = Date.parse((today).toLocaleDateString());
    date = [];
    $('.enewsarchive a').each(function(){
        const [year, month, day] = $(this).attr('data-date').split("-");
        temp =  new Date($(this).attr('data-date').replace( /(\d{2})-(\d{2})-(\d{4})/, "$1/$3/$2" ));
        if (currentDate >= temp) {
            date.push(temp);
        }
    });
    curr = new Date(Math.max.apply(null, date.map(function(e) {
          return new Date(e);
    })));
    attr = curr.getFullYear()+'-'+(("0" + (curr.getMonth() + 1)).slice(-2))+'-'+(("0" + curr.getDate()).slice(-2))
    $('.enewsarchivepost a[data-date="'+attr+'"]').addClass('active');
// Load iframe with archives
    $('.enewsarchive a').click(function(e){
        e.preventDefault();
        $('#enews').attr('src',$(this).attr('href'));
        $('.enewsarchive a.active').removeClass('active');
        $(this).addClass('active');
    });
});
0
sethuraman 15 Мар 2018 в 05:12

Если я правильно понял ваш вопрос, вам нужно добавлять класс .active только в один тег за раз? Если это то, что вы ищете, вы можете просто использовать приведенный ниже код.

$(".enewsarchive a.active").removeClass('active'); //remove active class from a tag before adding it
$(this).addClass('active'); // today

Это то, что вы ищите? Или я неправильно понял вопрос?

0
freginold 14 Мар 2018 в 12:26