将元素数组传递给 jquery / javascript 函数

Question

我正在尝试使用 html 和 jquery / javascript 制作日历。在这个日历中，我试图在具有给定类的一行 div 中动态显示日期，浮动在另一个 div 中。

HTML 如下：

<div id="view-month">

    <div class="day">&nbsp;&nbsp;</div>
    ......an array of 42 elements for a 7 x 6 grid for viewing a month
    <div class="day">&nbsp;&nbsp;</div>
    <div class="day">&nbsp;&nbsp;</div>

</div>

我正在尝试的 jquery 如下：

        $(document).ready(  function() { 

        var date = new Date(); // Gets the current date in a variable
        var selected_date = date.getDate(); // gets the current date (only dd)
        var month_no = date.getMonth(); // Gets the month as number - like January : 0, February : 1, March : 2
        var year = date.getFullYear(); // Gets the year in 'yyyy' format
        var month_string; // variable for holding the no. of days in the selected month
        var no_of_days_in_month; // variable for holding the total no. of days in the selected month for the selected year

        // ******** The following array holds the names of all the months for showing the chose month ********* //
        var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        $('#month-and-year').html(months[month_no] + ', ' + year); // shows the month in the heading of the calendar on month-name, 'yyyy' format


        // ******** code for showing dates of the selected month and year showing in the header ********//

        //function monthDetail(month_string) { }

        if (month_string == 'January') {
            var no_of_days_in_month = 31;
            month_no = 0;
        }

        if (month_string == 'February') {

            var isleapyear = function(year) {
                return (yr % 400) ? ((yr % 100) ? ((yr % 4) ? false : true) : false) : true;
            }

            if (isleapyear) {
                var no_of_days_in_month = 29;
            }

            else {
                var no_of_days_in_month = 28;
            }
            month_no = 1;
        }

        if (month_string == 'March') {
            var no_of_days_in_month = 31;
            month_no = 2;
        }

        if (month_string == 'April') {
            var no_of_days_in_month = 30;
            month_no = 3;
        }

        if (month_string == 'May') {
            var no_of_days_in_month = 31;
            month_no = 4;
        }

        if (month_string == 'June') {
            var no_of_days_in_month = 30;
            month_no = 5;
        }

        if (month_string == 'July') {
            var no_of_days_in_month = 30;
            month_no = 6;
        }

        if (month_string == 'August') {
            var no_of_days_in_month = 31;
            month_no = 7;
        }

        if (month_string == 'September') {
            var no_of_days_in_month = 30;
            month_no = 8;
        }

        if (month_string == 'October') {
            var no_of_days_in_month = 31;
            month_no = 9;
        }

        if (month_string == 'November') {
            var no_of_days_in_month = 30;
            month_no = 10;
        }

        if (month_string == 'December') {
            var no_of_days_in_month = 31;
            month_no = 11;
        }

        var alldivs = $('.day');  // the entire predfined array of divs with a given number (42, in the present case)
                                  // (for a calendar - will be depending on the design of the grid for the month-view ) 
                                  // is assigned to a variable


            // ********* the following function draws / shows the calendar for the chosen month and year *********** //

            function showCalendar(year, month_no, selected_date, alldivs) { 

                // ************** Get the first day of the month showing on the top pane **************//

                var FirstDayofMonth = new Date(year, month_no, 1); // returns the first day of the given month in long date format 
                                                               // showing the day of the week, date, month, year and time

                // ************** Get the first day of the first week of the month showing on the top pane **************//

                var FirstDayofFirstWeek = FirstDayofMonth.getDay(); // returns the number place of the first day of the month
                                                                // within 0 to 6 i.e. 7 days of week

                var ofset; // this variable holds the number of divs to be left free from top left while showing the month selected

                ofset = FirstDayofFirstWeek;

                var no_of_div; // no of divs to be highlighted as days of the month in concern

                no_of_div = no_of_days_in_month;



                // **** the following variable holds the no of divs from the first div in the matrix of the calendar to the div 
                // **** showing the last date of the month in concern **** //

                var divcount = parseInt(ofset)+parseInt(no_of_div); //without parseInt() it will produce garbage and hence ridiculously wrong result


                var i; //index for looping over the entire array of divs ( the entire grid for a calendar)  

                var j = 1; //for counting date of a calendar



                for (i = 0; i <= divcount-1; i++) {

                        if (i >= ofset && i <= divcount) {

                            $(alldivs[i]).html(j).css({'background-color':'#ff7'});

                                if (j == selected_date) {

                                    $(alldivs[i]).html(j).css({'background-color':'#def'});

                                }

                        j++;}
                    }

                } // end of function showCalendar()


        // ******************* end of function showCalendar() ********************** //


        showCalendar(year, month_no, selected_date, alldivs);

        // ******** code to show calendar in the grid ******** //

        $('#go-to-previous-year').on('click', function() {
            year = year - 1;
            $('#month-and-year').html(months[month_no] + ', ' + year);
            showCalendar(year, month_no, selected_date, alldivs );
        });

        $('#go-to-next-year').on('click', function() {
            year = year + 1;
            $('#month-and-year').html(months[month_no] + ', ' + year);
            showCalendar(year, month_no, selected_date, alldivs );
        });

        $('#go-to-previous-month').on('click', function() {

            if (month_no == 0) { 
                month_no = 12;
                month_no = month_no - 1;
                $('#month-and-year').html(months[month_no] + ', ' + year);
                month_string = months[month_no];
                showCalendar(year, month_no, selected_date, alldivs );
            }
             else {
                month_no = month_no - 1;
                $('#month-and-year').html(months[month_no] + ', ' + year);
                month_string = months[month_no];
                showCalendar(year, month_no, selected_date, alldivs );
            }
        });

        $('#go-to-next-month').on('click', function() {
            if (month_no == 11) { 
                month_no = -1;
                month_no = month_no + 1;
                $('#month-and-year').html(months[month_no] + ', ' + year);
                month_string = months[month_no];
                showCalendar(year, month_no, selected_date, alldivs );
            }
            else {
                month_no = month_no + 1;
                $('#month-and-year').html(months[month_no] + ', ' + year);  
                month_string = months[month_no];
                showCalendar(year, month_no, selected_date, alldivs );              
            }

        });

        }); //end of $(document).ready()

我想，我没有正确传递 42 个 div 的数组，其中包含“day”类（我一直试图通过这里的变量“alldivs”来完成），因此日历没有显示。该函数没有错误消息。

当我单独运行它时，相同的代码可以工作 - 即没有将它放在函数中。所以我的猜测是我必须将这 42 个 div 的数组作为参数传递给函数，并更改它们的属性和 html 以显示日历。

谁能帮忙？

问候

苏卡兰

Answer 1

month_string 没有在任何地方设置，所以no_of_days_in_month 永远不会被设置，所以一切都失败了。

修复那些我至少得到一个黄色的大框，页面下方是 1-31 和 16（今天）突出显示，而不是空白页。我不确定最终结果是否应该是这样，但这是向前迈出的一步。