使用 javascript/jquery 基于日期范围动态附加 div答案

【问题标题】：appending divs dynamically based on daterange with javascript/jquery使用 javascript/jquery 基于日期范围动态附加 div
【发布时间】：2016-04-19 00:49:10
【问题描述】：

在这里查看：http://js.do/code/79682 我试图弄清楚如何做到这一点，以便在选择日期范围时，下面显示的日期是可点击的，当点击它们时，会出现一个带有该日期内容的 div。因此，如果 Total Days: 5 则这 5 个日期显示为链接，单击它们时会显示 div 内容，如果单击另一个 div 则关闭前一个 div 并显示所选日期的新 div 内容。每次我尝试合并 div“日期”时，它都会破坏脚本。

【问题讨论】：

您的代码不能在提供的链接中修改。请在 codepen.io 中创建一个项目，以便其他人可以使用它。

标签： javascript jquery html

【解决方案1】：

您可能遇到的问题是您试图将 onclick 事件设置为不存在的事件，这就是您需要设置 .delegate() 的原因。修复在底部。

所以试试这个：

$(document).ready(function() {
    document.getElementById('dates').style.display = 'none';
    $( "#from" ).datepicker({
    altField: "#alternate",
    altFormat: "DD, d MM, yy",
    minDate: null,
    maxDate: "+60D",
    onSelect: function(selected) {
    $("#to").datepicker("option","minDate", selected);
    calcDiff();
 }
});

$( "#to" ).datepicker({
   altField: "#alternate1",
   altFormat: "DD, d MM, yy",
   minDate: new Date( (new Date()).getTime() + 86400000 ),
   maxDate:"+60D",
   onSelect: function(selected) {
   $("#from").datepicker("option","maxDate", selected);
   calcDiff();
}
});

function calcDiff() {

  var date1 = $('#from').datepicker('getDate');
  var date2 = $('#to').datepicker('getDate');
  var diff = 0;
  $('#totaldays').empty();
  if (date1 && date2) {
     diff = (Math.floor((date2.getTime() - date1.getTime()) / 86400000))+1;
     for(var d = date1.getTime(); d <= date2.getTime(); d = d + 86400000){
        $('#totaldays').append( '<a class="dates">' + $.datepicker.formatDate(   "MM d, yy", new Date(d) ) + "</a><br>");
    }
}
$('#calculated').val(diff);

}
 var tempDate;
 var closed;
 $('body').delegate('.dates', 'click', function() {
   var date = $(this).text();
   $(".createdDiv").remove();
   if(date != tempDate || closed){
       $(this).after( '<div class="createdDiv" style="height:100px;background-color:blue;"></div>' );
       closed = false;
    }
    else{
       closed = true;
    }
    tempDate = $(this).text();
});

});

【讨论】：

这是我想要的，除了这不允许我使用预定义的 div，因为我有每个日期的不同内容，总共最多 60 个不同的日期。这样做，不再允许我拥有固定的内容。我最初在我的代码中尝试遍历它们的 div id 日期，第一个日期将匹配第一个 div，第二个日期将具有第二个 div 的内容，依此类推。我会在完成这项工作后添加其他 58 个，这不可能吗？
我发现了这个：stackoverflow.com/questions/34618628/…。用户 gaemaf 的答案最接近我想要完成的任务，但我不知道如何将相同的概念用于日期选择器