Question

我试图创建某种日历，这是由javascript（jQuery + moment.js）生成的。开始日期是项目的iso周代码的开始，结束日期是项目的iso周代码的结束。我试图通过日期迭代两次，从开始日期开始，到结束日期结束。

问题是在第一次迭代后，第二次没有被执行，我不知道为什么。有什么想法吗？

$(function(){
				var startAt = moment(("2017-02-15 00:00:00").substring(0,10), "YYYYMMDD");
        var finishAt = moment(("2017-12-28 00:00:00").substring(0,10), "YYYYMMDD");
        
        var startAtWeekCode = startAt.isoWeek();
        var finishAtWeekCode = finishAt.isoWeek();
        
        var startAtYear = startAt.year();
        var finishAtYear = finishAt.year();
        
        var startAtDay = startAt.startOf('isoWeek');
        var finishAtDay = finishAt.endOf('isoWeek');
        
        var daysLength = finishAtDay.diff(startAtDay, 'days');
        
        $(".week-grid").css({
            width: daysLength*15
        });

    for(var i=startAtDay; i<finishAtDay; i.add(1, "month")){
      console.log("MONTH");
      var $monthItem = $('<div class="month"></div>');
      $monthItem.text(i.format("MMMM"));
      $monthItem.css({
        width: i.daysInMonth()*15
      });

      $(".line-calendar.project-calendar-months").append($monthItem);
    }
    
    for(var j=startAtDay; j<finishAtDay; j.add(1, "day")){
            console.log("day");
            var classSat = "";
            var classSun = "";
            var classHoli = ""; 
            
            
            if(j.day() == 6){
                classSat = " sat ";
            }
            if(j.day() == 0){
                classSun = " sun ";
            }
            $(".line-calendar.project-calendar-days").append('<div data-day-of-week="'+ j.day() +'" class="day' + classSat + classSun + classHoli + '">' + j.date() + '</div>');
        }
});

.overflow-x{
position: absolute;
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}

.month {
    color: #666;
    height: 15px;
    display: inline-block;
    float: left;
}

.day {
    width: 15px;
    height: 15px;
    line-height: 14px;
    font-size: 9px;
    font-weight: normal;
    float: left;
    color: #333;
}

.sat {
    background-color: #f9f9f9;
    color: #000;
}

.sun {
    background-color: #f4aab5;
    color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-x">
  <div class="week-grid">
  <!-- MONTHS -->
    <div class="line-calendar separator-row header noselect project-calendar-months">

    </div> 
    <!-- DAYS -->
    <div class="line-calendar separator-row  header noselect project-calendar-days">

    </div> 
  </div>
</div>

Link to JSFiddle

Answer 1

您将startAtDay指定为i和j作为参考，两个变量都将引用相同的startAtDay，并在每个周期中进行变异。

您需要在变异之前克隆该值：https://momentjs.com/docs/#/parsing/moment-clone/

这是更新的plunker：https://jsfiddle.net/kfwxrv3o/

Answer 2

因为您要在第一个循环中更改startAtDate。当你在javascript中进行赋值时，你不复制对象，只需创建一个指向内存中对象的新链接。因此，当您描述第一个循环时，您说该对象现在有一个名为i的新引用，并且此对象应该由此规则i.add(1, "month"))更改，因此，一步一步，{{1} }已经不小于startAtDate - 这就是问题，为什么第二个循环甚至没有开始

两个循环遍历日期

2 个答案: