Изменение значения переменной в операторе if в Javascript

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;
    });
}

Теперь, каждый раз, когда я нажимаю кнопку с идентификатором «следующий месяц», это всегда 2. Если я нажимаю кнопку с идентификатором «пред.-месяц ", это всегда 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/