Pourquoi cette variable ne sera-t-elle pas mise à jour?

Question

Dans le document.ready() je:

$('#menu_indicator').append('<p>' + currPage + '/' + pageLimit + '</p>'); 

PageLimit est toujours un numéro qui ne change pas tout au long de l'ensemble du code. Je l'ai pour que lorsqu'un utilisateur clique sur un bouton, il change currPage à un nombre différent. (cette partie n'est pas dans document.ready();)

Pourquoi ne le met-il pas à jour dans l'indicateur? Des idées pour le réparer?

Merci

Answer 1

La raison pour laquelle votre code ne fonctionne pas comme vous vous attendez à est que vous ne l'ajoutez une fois, il ne se fixe pas un gestionnaire « en direct » ou quelque chose comme ça.

Si vous voulez que l'indicateur pour changer chaque fois que vous définissez une nouvelle valeur pour currPage je construirais une fonction comme ceci:

function setCurrentPage(page) { 
    currPage = page; 

    $("#menu_indicator p").html(currPage + "/" + pageLimit); 
} 

Ceci est bien sûr en supposant currPage et PageLimit sont déclarés sur une portée mondiale

Answer 2

Demo pour le code ci-dessous: http://jsbin.com/oruqa3

HTML:

<input type="button" value="click" /> 
<div id="menu"></div> 

JavaScript:

var currPage = 1, pageLimit = 20; 
$(function() { 
    $('input[type=button]').click(function() { 
    if(currPage <=pageLimit) { 
    call(); 
    currPage++; 
    } 
    }); 
}); 


var call = function() { 
    $('#menu').html('<p>' + currPage + '/' + pageLimit + '</p>'); 
    }