如果data-date是今天，则添加类，否则将类添加到上一个日期

Question

I'm using the code by Arg0n from add class if date is today which works great! I was wondered if it's possible to add only one class, so if attribute data-date equals today add class .active , else add class to the previous date (next available data-date). So there will always be one element highlighted.

An added complication is the iframe which loads the active date's html file.

A visual diagram of the process may make it clearer

Hopefully any solutions will help someone else out there too. Any help appreciated.

 $(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> 

Answer 1

If I have understood your question correctly you need to add .active class in only one a tag at a time? If this is what you are looking for you can simply use below code.

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

Is this what you are looking for? Or have I misunderstood the question?

Answer 2

Try this one

$(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');
    });
});