我创建了一个简单的jquery日历。这是jsfiddle：
HTML：
<div id="boxupload" class="box_upload">
<div colspan="2" class="linea">
<div><button type="button" class="close" id="close">×</button></div>
<div width="300px" id="form_title" class="box_title title">Acerca de mi</div>
</div>
<div><hr style="margin:0px"></div>
<div colspan="2" class="linea">
<div id="form_subtitle" class="box_subtitle title">Puedes indicar la fecha en la que escribes acerca de ti, y en futuro, si tu o tu vida cambia, escribir otro texto.</div>
</div>
<div colspan="10" style="width: 100%; border-top: 5px solid #EF4F69;">
<div style="padding: 30px 0; min-height: 340px; background: #f2f2f2;">
<div id="list_year" class="fl_l">
<div style="padding: 0 0px 0 50px;" id="moveup">Up</div>
<ul id="year-picker" style="height: 290px; overflow: hidden;">
<li class="year 2014"><a data-year="2000" href="#">2000</a></li>
<li class="year 2014"><a data-year="2001" href="#">2001</a></li>
<li class="year 2014"><a data-year="2002" href="#">2002</a></li>
<li class="year 2014"><a data-year="2003" href="#">2003</a></li>
<li class="year 2014"><a data-year="2004" href="#">2004</a></li>
<li class="year 2014"><a data-year="2005" href="#">2005</a></li>
<li class="year 2014"><a data-year="2006" href="#">2006</a></li>
<li class="year 2014"><a data-year="2007" href="#">2007</a></li>
<li class="year 2014"><a data-year="2008" href="#">2008</a></li>
<li class="year 2014"><a data-year="2009" href="#">2009</a></li>
<li class="year 2014"><a data-year="2010" href="#">2010</a></li>
<li class="year 2014"><a data-year="2011" href="#">2011</a></li>
<li class="year 2014"><a data-year="2012" href="#">2012</a></li>
<li class="year 2014"><a data-year="2013" href="#">2013</a></li>
<li class="year 2014"><a data-year="2014" href="#">2014</a></li>
<li class="year 2015"><a data-year="2015" href="#">2015</a></li>
<li class="year 2016"><a data-year="2016" href="#">2016</a></li>
<li class="year 2016"><a data-year="2017" href="#">2017</a></li>
<li class="year 2016"><a data-year="2018" href="#">2018</a></li>
<li class="year 2016"><a data-year="2019" href="#">2019</a></li>
<li class="year 2016"><a data-year="2020" href="#">2020</a></li>
</ul>
<div style="padding: 0 0px 0 40px;" id="movedown">Down</div>
</div>
<div id="list_month" class="fl_l">
<ul id="month-picker">
<li data="01" class="mounth 01"><a data-year="2015" data-month="1" href="#">Enero</a></li>
<li data="02" class="mounth 02"><a data-year="2015" data-month="2" href="#">Febrero</a></li>
<li data="03" class="mounth 03"><a data-year="2015" data-month="3" href="#">Marzo</a></li>
<li data="04" class="mounth 04"><a data-year="2015" data-month="4" href="#">Abril</a></li>
<li data="05" class="mounth 05"><a data-year="2015" data-month="5" href="#">Mayo</a></li>
<li data="06" class="mounth 06"><a data-year="2015" data-month="6" href="#">Junio</a></li>
<li data="07" class="mounth 07"><a data-year="2015" data-month="7" href="#">Julio</a></li>
<li data="08" class="mounth 08"><a data-year="2015" data-month="8" href="#">Agosto</a></li>
<li data="09" class="mounth 09"><a data-year="2015" data-month="9" href="#">Septiembre</a></li>
<li data="10" class="mounth 10"><a data-year="2015" data-month="10" href="#">Octubre</a></li>
<li data="11" class="mounth 11"><a data-year="2015" data-month="11" href="#">Noviembre</a></li>
<li data="12" class="mounth 12"><a data-year="2015" data-month="12" href="#">Diciembre</a></li>
</ul>
</div>
<div id="list_day" class="fl_l" style="padding: 0 80px;">
<div>
<div class="fl_l day_week">Ln</div>
<div class="fl_l day_week">Ma</div>
<div class="fl_l day_week">Mi</div>
<div class="fl_l day_week">Ju</div>
<div class="fl_l day_week">Vi</div>
<div class="fl_l day_week">Sa</div>
<div class="fl_l day_week">Do</div>
</div>
<div class="mounth_day clearfix">
<div id="week1">
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
</div>
<div id="week2">
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
</div>
<div id="week3">
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
</div>
<div id="week4">
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
</div>
<div id="week5">
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
</div>
<div id="week6">
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
<div class="fl_l day" data-day="" data-month="" data-year=""></div>
</div>
</div>
</div>
<div>
<div id="block_bttn_left" class="btns_left">
<div class="fl_l btn_left">pic</div>
<div class="fl_l btn_left">pic</div>
<div class="fl_l btn_left">pic</div>
</div>
<div id="close_button" class="bttn btn_cancelar">Cancelar</div>
<div id="save_button" class="bttn btn_guardar">Guardar</div>
</div>
</div>
</div>
JS：
$(document).ready(function() {
// Main function for updating calendar
function updateCalendar(fCurrentMonth, fCurrentYear) {
// Get month's number of days
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
// Get the starting day of a month
function dayStart(month, year) {
var day = new Date(year + "-" + month + "-01").getDay();
day = (day===0) ? 7 : day;
return day;
}
// Assign the above functions to variables
var dayStart = parseInt(dayStart(fCurrentMonth, fCurrentYear));
var daysInMonth = parseInt(daysInMonth(fCurrentMonth, fCurrentYear));
// Reset day values
$("#list_day .day").text("");
// Fill in calendar days with values
var i = 1;
$("#list_day .day").slice(parseInt(dayStart) - 1).each(function() {
$(this).text(i);
$(this).attr("data-day", i);
$(this).attr("data-month", fCurrentMonth);
$(this).attr("data-year", fCurrentYear);
if(i == daysInMonth) {
return false;
}
i++;
});
// Hide empty calendar rows
if((dayStart + daysInMonth) <= 35) {
$("#list_day #week6").hide();
} else {
$("#list_day #week6").show();
}
// Hide empty calendar rows
if((dayStart + daysInMonth) <= 28) {
$("#list_day #week5").hide();
} else {
$("#list_day #week5").show();
}
}
// Get current month
function getCurrentMonth() {
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
return parseInt(currentMonth) + 1;
}
// Get current year
function getCurrentYear() {
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
return parseInt(currentYear);
}
// On page load, set calendar to current date
updateCalendar(getCurrentMonth(), getCurrentYear());
// Update calendar when choosing year
$("#list_year .year a").click(function(e) {
e.preventDefault();
$("#list_year .year a").removeClass("active");
$(this).addClass("active");
var currentYear = $(this).data("year");
$("#list_month .mounth a").attr("data-year", parseInt(currentYear));
var currentMonth = $("#list_month .mounth a").data("month");
currentYear = $("#list_month .mounth a").data("year");
updateCalendar(parseInt(currentMonth), parseInt(currentYear));
});
// Update calendar when choosing month
$("#list_month .mounth a").click(function(e) {
e.preventDefault();
$("#list_month .mounth a").removeClass("active");
$(this).addClass("active");
$("#list_day .day").attr("style", "");
var currentMonth = $(this).data("month");
var currentYear = $(this).data("year");
updateCalendar(parseInt(currentMonth), parseInt(currentYear));
});
// Function for changing day color
function picker_set_bg(day, month, year, color) {
var selector = "[data-day="+parseInt(day)+"][data-month="+parseInt(month)+"][data-year="+parseInt(year)+"]";
$(selector).css("background", color)
}
});
当我选择一年零一个月时，它会起作用。并且，当一个月已经活跃并且我决定改变年份时，它第一次起作用。但是在更改一次之后，当再次点击其他年份时它不起作用。它没有给出任何JS错误，它只是不起作用。首先，我必须再次更改月份，以便我可以更改年份。
感谢。
答案 0 :(得分：1)
这不起作用的原因是因为你混淆了使用jQuery data（）方法检索年份与使用attr（）方法直接访问HTML属性之间的用法。
注意：使用data方法更新年份不会更新HTML 5属性，它将更新它针对DOM元素存储的jQuery数据引用。因此，如果您实际检查HTML元素，则data-year元素将不会更改它最初设置的内容。
应该更新LOC 83以使用数据方法检索年份：$("#list_month .mounth a").data("year", parseInt(currentYear));
仅这一点就可以解决问题。
但是你也可以删除LOC 85，因为currentYear已经初始化并在LOC 81上正确设置。
var currentYear = $(this).data("year");
...
currentYear = $("#list_month .mounth a").data("year");
请在此处查看分叉小提琴：http://jsfiddle.net/9qzjLt1j/2/