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

Question

我有一个基本的 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 用于从数组中获取新消息。

---

为了进一步解释增量技巧，% 模运算符返回 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< /code> 现在再次变为 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++;
});