Question

点击此处：http://js.do/code/79682 我试图弄清楚如何制作它，以便在选择日期范围时，下面显示的日期是可点击的，当它们被点击时，会出现一个包含该日期内容的div。因此，如果总天数：5那么这5个日期显示为链接，当单击它们时，将显示div内容，如果单击另一个div，则前一个div关闭，并显示所选日期的新div内容。每次我尝试合并div＆＃34; date＆＃34;它破坏了剧本。

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

});

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

1 个答案: