时间戳

首页 > 解决方案 > 单击右箭头生成下一个日期序列

  • javascript - 单击右箭头生成下一个日期序列

  • 问题描述

    我想通过点击右箭头来获得接下来的 7 个日期序列。我不确定如何引用我的 li 元素。我尝试使用这个和 li.append 但它们都不适合我。

    $('.rightarrow').on('click', function() {
  var y = 1;
  var currentDateCGH = new Date();
  var date = currentDateCGH.getDate() + 7;
  var monthArr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  var currMonth = monthArr[currentDateCGH.getMonth()];
  var currYear = currentDateCGH.getFullYear();
  $(".dateslots li:empty").each(function() {
    //$('<li>').append((date + y)+"-"+currMonth);
    //$(this).text((date + y)+"-"+currMonth);
    y++;
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dateslots">
  <li class="leftarrow">&nbsp;</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="rightarrow">&nbsp;</li>
</ul>

    标签： javascriptjquery

    解决方案

    li:empty只会在第一次通过，因为这些元素在每次后续执行时都不会为空。因此，您需要更加明确地选择元素。我喜欢先做最简单的事情（只需选择所有li元素并只对您想要的元素进行操作）。对于不同的类应用程序，这个选择可以更具体，但现在，以下就足够了。

    $(".dateslots li").each(function(){
    // convert our element into a jquery element
    var $li = $(this);

    // ignore the arrows
    if ($li.hasClass('leftarrow') || $li.hasClass('rightarrow')) {
        return;
    }

    // for every other one, we want to add some value to our date
    // this value happens to be the same number as any element's previous number of siblings
    // no need for a y counter
    $li.text((date + $li.prevAll().length)+"-"+currMonth);
});

    有关该prevAll功能的更多信息，请参见此处

    您在此函数之前有一些逻辑问题，其中无论您单击右箭头多少次，它只会向您显示接下来的 7 天，但这应该解决您修改与您构造的日期值相关的 li 元素的问题。

    推荐阅读