Question

我有一个基本的jQuery函数：

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

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

首先点击附加文字“留言1”
第二次单击会附加文本“消息2”
第三次点击会附加文字“留言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现在再次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++;
});

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

3 个答案: