JQuery добавить другой текст каждый клик

Question

У меня есть основные функции JQuery происходит:

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

Это работает отлично, за исключением того, я хочу, чтобы добавить другой текст на каждой последовательной мыши. Например:

1. Сначала нажмите присоединяет текст «Сообщение 1»
2. Второй щелчок присоединяет текст «Сообщение 2»
3. Третий щелчок добавляет текст «Сообщение 3»

и так далее, и так ...

Кроме того, я хотел бы установить ограничение, говорящее, что после 4 щелчков ничего больше не происходит.

Любая помощь будет оценена по достоинству.

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

Это фактически «добавит» их. Если вы хотите каждый раз заменять каждое сообщение, вы должны использовать .text() вместо .append().

DEMO (с использованием .text()):http://jsfiddle.net/thVK6/

Переменная i будет увеличиваться с каждым щелчком. Когда i равно messages.length, он будет сброшен на 0.

Таким образом, каждый клик, i используется для захвата нового сообщения из массива.

---

Для дальнейшего объяснения приращения трика, оператор % по модулю возвращает остаток при делении на imessages.length.

Когда i равно messages.length, остаток 0, поэтому мы вернемся к началу.

var i = -1; 

Первый щелчок:

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

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

Второй щелчок:

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

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

Третий щелчок:

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

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

Четвертое нажатие:

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

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

... и так i теперь 0 снова, так что начинается снова.

---

Так же прибавка трюк, но прописано, как указано выше будет ...

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

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

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

Answer 2

Одним из возможных вариантов:

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

Живая демонстрация:http://jsfiddle.net/RhBAh/

Answer 3

ссылка: 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++; 
});