jQuery每次点击都附加不同的文字

我有一个基本的jQuery函数：

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

这很好，除了我想在每个连续点击上附加不同的文字。 例如：

1. 首先单击附加文本“消息1”
2. 第二次单击附加文本“消息2”
3. 第三次单击会附加文本“消息3”

等等等等…

另外，我想设置一个限制，比如4，经过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都会使用从数组中获取新消息。

---

为了进一步解释增量技巧， % modulo运算符在将i除以messages.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/

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