javascript - 如何在不复制粘贴代码和编辑变量的情况下执行 2 次？

Question

我想让这段代码准备好同时用于 2 个或更多日历。我的意思是..我想要这样的东西。

我懂了：

我的js代码在这里：

var Calendar = {
    start: function () {
        this.setTriggers();
    },

    end: function () {

    },

    setTriggers: function () {
        var _this = this;
        this.getArrowLeft().on("click", function () {
            _this.navigationHandler(-1);
        });
        this.getArrowRight().on("click", function () {
            _this.navigationHandler(1);
        });
    },

    getContainer: function () {
        return $(".container");
    },

    getArrowLeft: function () {
        return this.getContainer().find(".prev-month");
    },

    getArrowRight: function () {
        return this.getContainer().find(".next-month");
    },

    // Global Variables
    currentDate: new Date(),
    d: new Date(),
    content: 'January February March April May June July August September October November December'.split(' '),
    weekDayName: 'SUN MON TUES WED THURS FRI'.split(' '),
    daysOfMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],

    // Clear calendar and drop a new one (next or previous month) 
    navigationHandler: function (dir) {
        // Take the current month displayed, clear it and display a new one
        this.d.setUTCMonth(this.d.getUTCMonth() + dir);
        this.clearCalendar();
        this.myCalendar();
    },


    // Returns the day of week which month starts (retorna tipo 1 para segunda, 2 terça..)
    getCalendarStart: function (dayOfWeek, currentDate) {
        var date = currentDate;
        var startOffset = (date % 7) - dayOfWeek;
        if (startOffset > 0) {
            startOffset -= 7;
        }
        return Math.abs(startOffset);
    },

    // Render Calendar
    renderCalendar: function (startDay, totalDays, currentDate) {
        var currentRow = 1;
        var currentDay = startDay;
        var $table = this.getContainer().find(".calendar-days-list table");
        var $week = this.getCalendarRow($(this));
        var $day;
        var i = 1;

        for (; i <= totalDays; i++) {
            $day = $week.find('td').eq(currentDay);
            $day.text(i);
            if (i === currentDate) {
                $day.addClass('today');
            }

            // +1 next day until Sunday (7), then reset to Monday (0)
            currentDay = ++currentDay % 7;

            // Generate new row when day is Monday, but only if there are
            // additional days to render
            if (currentDay === 0 && (i + 1 <= totalDays)) {
                $week = this.getCalendarRow();
                currentRow++;
            }
        }
    },

    // Clear generated calendar
    clearCalendar: function () {
        var $trs = $('tr').not(':eq(0)');
        $trs.remove();
        $('.month-year').empty();
    },

    // Generates table row used when rendering Calendar
    getCalendarRow: function () {
        var $table = this.getContainer().find(".calendar-days-list table");
        var $tr = $('<tr/>');
        for (var i = 0, len = 7; i < len; i++) {
            $tr.append($('<td/>'));
        }
        $table.append($tr);
        return $tr;
    },

    myCalendar: function () {
        var month = this.d.getUTCMonth();
        var day = this.d.getUTCDay();
        var year = this.d.getUTCFullYear();
        var date = this.d.getUTCDate();
        var totalDaysOfMonth = this.daysOfMonth[month];
        var counter = 1;

        var $h3 = $('<h3>');

        $h3.text(this.content[month] + ' ' + year);
        $h3.appendTo('.month-year');

        var dateToHighlight = 0;

        // Determine if Month && Year are current for Date Highlight
        if (this.currentDate.getUTCMonth() === month && this.currentDate.getUTCFullYear() === year) {
            dateToHighlight = date;
        }

        //Getting February Days Including The Leap Year
        if (month === 1) {
            if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
                totalDaysOfMonth = 29;
            }
        }

        // Get Start Day
        this.renderCalendar(this.getCalendarStart(day, date), totalDaysOfMonth, dateToHighlight);
    },
}


$(document).ready(function () {
    // Generate Calendar
    Calendar.start();
    Calendar.myCalendar();
});

我的html：

<div class="new-calendar large">
                <div class="new-calendar-inside">
                    <div class="month-and-year-calendar">
                        <div class="left-arrow prev-month"><i class="icon chevron left"></i></div>
                        <div class="month-year"></div>
                        <div class="right-arrow next-month"><i class="icon chevron right" style="text-align: right"></i>
                        </div>
                    </div>
                    <div class="calendar-days-list">
                        <table class="table table-bordered">
                            <tr class="days-of-the-week">
                                <th>S</th>
                                <th>T</th>
                                <th>Q</th>
                                <th>Q</th>
                                <th>S</th>
                                <th>S</th>
                                <th>D</th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="new-calendar-inside">
                    <div class="month-and-year-calendar">
                        <div class="left-arrow prev-month"><i class="icon chevron left"></i></div>
                        <div class="month-year"></div>
                        <div class="right-arrow next-month"><i class="icon chevron right" style="text-align: right"></i>
                        </div>
                    </div>
                    <div class="calendar-days-list">
                        <table class="table table-bordered">
                            <tr class="days-of-the-week">
                                <th>S</th>
                                <th>T</th>
                                <th>Q</th>
                                <th>Q</th>
                                <th>S</th>
                                <th>S</th>
                                <th>D</th>
                            </tr>
                        </table>
                    </div>
                    <div class="calendar-buttons">
                        <button class="new-button no-border-button">Cancelar</button>
                        <button class="new-button no-border-button">Ok</button>
                    </div>
                </div>
            </div>

我无法生成它两次。它只是出现在右侧...我该怎么办？我不能使用更多的“this”来尝试让父 div 生成它..

谢谢

标签： javascripthtmlcsscalendar

Answer 1

您可以使用while循环

这是一个例子：

var i = 0;
while (i < 2) {
    
    
    (your code)
    
    
    i = i + 1;
}