jQuery Click事件仅触发一次

Question

Can you please take a look at this Demo and let me know why the click events on #pre and #nex only firing once!

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var d = new Date();
var n = d.getMonth();
$("#month").html(months[n]);

$(".row").on('click' , '#pre',  function(){
    $("#month").html(months[n-1]);
});

$("#nex").on('click' , function(){
  $("#month").html(months[n+1]);
});

I also tried to use the delegate method on #pre which again didn't work

Answer 1

You need to decrement and increment the value of n for this to work. You also need to make sure that you are not outside the bounds of the array when you do so, otherwise you will get an index out of range exception.

$(".row").on('click' , '#pre',  function(){
    n = (n === 0) ? months.length - 1 : n - 1;
    $("#month").html(months[n]);
});

$("#nex").on('click' , function(){
    n = (n === months.length - 1) ? 0 : n + 1;
    $("#month").html(months[n]);
});

Answer 2

You aren't changing the value of n, so you're always going to get last month from today. Get the current value of #month first in your onclick method.

Answer 3

Your events are firing - you are just setting the same value each time they fire. try adding n+=1 and n-=1 in your events to change the value.

Answer 4

i am edit your code and now working you should change counter value will each click ..

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; var d = new Date(); var n = d.getMonth();

$("#month").html(months[n]);

$(".row").on('click' , '#pre',  function(){
    $("#month").html(months[n-1]);
    n=n-1
});

$("#nex").on('click' , function(){
  $("#month").html(months[n+1]);
    n=n+1
});