Question

我遇到了一段代码问题，这让我感到疯狂。我被困在这几个小时，最糟糕的是我假设它很简单;我只是想不出来。

我正在尝试使用Javascript / jQuery创建一个简单的事件日历。这是我的简化代码：

var currentMonth = 1;
if (currentMonth == 1) {
    $("#prev-month").click( function() {
        currentMonth = 12;
    });
    $("#next-month").click( function() {
        currentMonth = 2;
    });
}
if ( currentMonth == 2) {
    $("#prev-month").click( function() {
        currentMonth = 1;
    });
    $("#next-month").click( function() {
        currentMonth = 3;
    });
}
if ( currentMonth == 3) {
    $("#prev-month").click( function() {
        currentMonth = 2;
    });
    $("#next-month").click( function() {
        currentMonth = 4;
    });
}
if ( currentMonth == 4) {
    $("#prev-month").click( function() {
        currentMonth = 3;
    });
    $("#next-month").click( function() {
        currentMonth = 5;
    });
}

现在，每次我点击ID为“下个月”的按钮时，它总是为2.如果我点击ID为“prev-month”的按钮，它始终为12.它永远不会改变。我做错了什么？

Answer 1

您的脚本代码只运行一次。单击它们后，您不会更改点击处理程序，因此这些处理程序将始终提供相同的结果。

但不是固定，为每个按钮使用单个处理程序并使用算术计算下一个/上个月而不是在运行时更改12个处理程序会更简单。

$("#prev-month").click( function() {
    currentMonth = (currentMonth - 1) || 12;
});
$("#next-month").click( function() {
    currentMonth = currentMonth % 12 + 1;
});

Answer 2

您正在使用.click()功能错误。你应该这样做：

var currentMonth = 1;

$("#prev-month").click(function() {
    currentMonth--;
    if (currentMonth == 0) {
        currentMonth = 12;
    }
}
$("#next-month").click(function() {
    currentMonth++
    if (currentMonth == 13) {
        currentMonth = 1;
    }
});

Answer 3

您可以使用闭包来存储您的引用，只使用一个单击处理程序（使用$(this).is()）：

<div>
    Current Month: <input type="text" id="current-month"/>
    <button id="prev-month">Previous Month</button>
    <button id="next-month">Next Month</button>
</div>

$(document).ready(function(){
    var currentMonth = 1,
        $currentmonth = $('#current-month');

    $currentmonth.val(currentMonth);

    $("#prev-month, #next-month").click(function() {
        var $this = $(this);

        if ($this.is('#prev-month')) {
            currentMonth = currentMonth - 1;
        } else {
            currentMonth = currentMonth + 1;
        }

        if (currentMonth == 0) {
            currentMonth = 12;
        } else if (currentMonth > 12) {
            currentMonth = 1;
        }

        $currentmonth.val(currentMonth);

        console.log('Current Month: ' + currentMonth);
    });
});

http://jsfiddle.net/pCs2G/

在Javascript中更改if语句中变量的值

3 个答案: