根據日期範圍動態添加div使用javascript/jquery

請點擊這裏：http://js.do/code/79682 我想弄清楚如何使它在選擇日期範圍時，下面顯示的日期是可點擊的，並且它們被點擊時一個div會顯示該日期的內容。因此，如果Total Days：5那麼這5個日期顯示爲鏈接，單擊它們時會顯示div內容，如果單擊另一個div，則先前的div將關閉，併爲選定的日期顯示新的div內容。每次我嘗試合併div「日期」時，都會打破腳本。根據日期範圍動態添加div使用javascript/jquery

來源

2016-01-13 Jane Doe

你的代碼不能在所提供的鏈接進行修改。請在codepen.io中創建一個項目，以便其他人可以使用它。 –

您可能遇到的問題是您嘗試將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(); 
}); 

});

來源

2016-01-13 22:18:05

這是我想要的，除了這不允許我使用預定義的div，因爲我有不同的內容爲每個日期高達總共60個不同的日期。這樣做，不允許我再擁有該固定內容。我最初在我的代碼中嘗試迭代它們的div id日期，第一個日期將匹配第一個div，第二個日期將包含第二個div的內容，等等。我得到這個工作後，我會添加其他58，這是不可能的？ –

我發現這個：http://stackoverflow.com/questions/34618628/dynamically-calling-on-existing-divs-with-jquery。用戶gaemaf的答案與我正在嘗試完成的最接近，但我不知道如何將相同的概念添加到日期選擇器中 –

根據日期範圍動態添加div使用javascript/jquery

回答

相關問題