Question

我正在使用来自add class if date is today的Arg0n的代码，效果很好！我想知道是否可以只添加一个类，所以如果属性data-date等于今天添加类 .active ，否则将类添加到上一个日期（下一个可用的数据日期）。所以总会有一个元素突出显示。

添加的复杂功能是加载活动日期的html文件的iframe。

A visual diagram of the process may make it clearer

希望任何解决方案都能帮助其他人。任何帮助表示赞赏。

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

如果我已正确理解您的问题，您需要一次只在一个标签中添加.active课程吗？如果这是您正在寻找的，您只需使用下面的代码。

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

这是你在找什么？或者我误解了这个问题？

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

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

2 个答案: