Javascript代码只执行一次

Question

我创建了一个简单的jquery日历。这是jsfiddle：

http://jsfiddle.net/9qzjLt1j/

HTML：

<div id="boxupload" class="box_upload">
    <div colspan="2" class="linea">
        <div><button type="button" class="close" id="close">&times;</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错误，它只是不起作用。首先，我必须再次更改月份，以便我可以更改年份。

感谢。

Answer 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/