jQuery append texte différent chaque clic

Question

J'ai une fonction jQuery de base passe:

$("#selector").click(function(){ 
    $("#target").append("Some text to be added..."); 
}); 

Cela fonctionne très bien, sauf que je veux ajouter un texte différent sur chaque clic séquentiel. Par exemple:

1. cliquez d'abord ajoute du texte "Message 1"
2. Deuxième clic ajoute du texte "Message 2"
3. cliquez troisième joint texte "Message 3"

et ainsi de ...

En outre, je voudrais définir une limite, à savoir, 4 qui après 4 clics, rien d'autre ne se passe.

Toute aide serait appréciée.

Answer 1

var messages = [ 
    'First click appends text "Message 1"', 
    'Second click appends text "Message 2"', 
    'Third click appends text "Message 3"' 
]; 

var i = -1; 

var target = $("#target"); 

$("#selector").click(function(){ 
    target.append(messages[i = ++i % messages.length]); 
}); 

Cela les "ajoutera" en fait. Si vous vouliez remplacer chaque message à chaque fois, vous utiliseriez .text() au lieu de .append().

DEMO (en utilisant .text()):http://jsfiddle.net/thVK6/

La variable i sera incrémenté à chaque clic. Lorsque i est égal à messages.length, il sera réinitialisé à 0.

Ainsi, à chaque clic, i est utilisé pour récupérer un nouveau message à partir du tableau.

---

Pour mieux expliquer l'astuce de l'incrément, le % opérateur modulo renvoie le reste lors de la division i par messages.length.

Lorsque i est égal à messages.length, le reste est 0, donc nous sommes de retour au début.

var i = -1; 

premier clic:

++i; // 0 
i = i % messages.length; // 0 

messages[ i ]; // first message (index 0) 

Deuxième clic:

++i; // 1 
i = i % messages.length; // 1 

messages[ i ]; // second message (index 1) 

Troisième clic:

++i; // 2 
i = i % messages.length; // 2 

messages[ i ]; // third message (index 2) 

cliquez quatrième:

++i; // 3 
i = i % messages.length; // 0, because 3 % 3 === 0 

messages[ i ]; // first message (index 0) 

... et i est maintenant 0 à nouveau, il recommence.

---

donc la même astuce incrément, mais précisées ci-dessus serait comme être ...

$("#selector").click(function(){ 
    ++i; 
    i = i % messages.length; 

    target.append(messages[ i ]); 
}); 

http://jsfiddle.net/thVK6/4/

Answer 2

Une possibilité:

(function() { 
    var messages, i; 

    i = 0; 
    messages = [ 
     'Message 1 ... ', 
     'Message 2 ... ', 
     'Message 3 ... ' 
    ]; 

    $(elem).click(function() { 
     if (i === messages.length) { i = 0; } 
     $(target).append(messages[ i ]); 
     i += 1; 
    }); 
}()); 

démo en direct:http://jsfiddle.net/RhBAh/

Answer 3

Référence: http://jsfiddle.net/HDUAK/2/

<div id="selector">Select</div> 
<div id="target">Target</div> 


var i = 1; 
$("#selector").click(function(){ 
    if(i > 4) {return false} else { 
     $("#target").append("Message"+i); 
    } 

    i++; 
});