jQuery的追加不同的文本每一次点击 [英] jQuery append different text each click

问题描述

我有一个基本的jQuery函数事情：

  $（＃选择）。点击（函数（）{
    $（＃目标），追加（一些文本添加...）;
}）;
 

但我想在每个顺序点击不同的文本追加这工作正常。例如：

1. 首先点击文本追加消息1


2. 第二次点击文本追加消息2


3. 第三次点击追加文本消息3

等等，等等...

另外，我想设置的限制，也就是说，这4后4次点击，没有什么事情发生。

任何帮助将是AP preciated。

解决方案

  VAR消息= [
  首先点击文本追加消息1'，
  第二次点击文本追加消息2'，
  第三次单击文本追加消息3'
];变种I = -1;VAR的目标= $（＃目标）;$（＃选择）。点击（函数（）{
    target.append（消息[I = ++ I％messages.length]）;
}）;
 

这实际上将追加他们。如果你想每次更换每条消息，你会使用的.text（）而不是 .append（）

DEMO （使用的.text（））：的的 http://jsfiddle.net/thVK6/

的 I 变量将与每次点击递增。当 I 等于 messages.length ，它会被重置为 0 。

因此​​，与每一次点击， I 用于抓住从数组新的消息。

---

要进一步说明增量把戏，划分在％模运算符返回余我按 messages.length 。

在 I 等于 messages.length ，余数是 0 ，所以我们又回到了起点。

  VAR我= -1;
 

的首先点击：的

  ++我; // 0
I = I％messages.length; // 0消息[I] //第一个消息（索引0）
 

的第二次点击：的

  ++我; // 1
I = I％messages.length; // 1消息[I] //第二个消息（指数1）
 

的第三点击：的

  ++我; // 2
I = I％messages.length; // 2消息[I] //第三个消息（索引2）
 

的第四点击：的

  ++我; // 3
I = I％messages.length; // 0，因为3％3 === 0消息[I] //第一个消息（索引0）
 

...等 I 现在 0 再次，所以它开始。

---

所以，同样的增量伎俩，但规定了如上会...

  $（＃选择）。点击（函数（）{
    ++我;
    I = I％messages.length;    target.append（消息[I]）;
}）;
 

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

I have a basic jQuery function going on:

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

That works fine, except I want to append different text on each sequential click. For example:

1. First click appends text "Message 1"
2. Second click appends text "Message 2"
3. Third click appends text "Message 3"

and so on and so forth...

Also, I would like to set a limit, to say, 4 which after 4 clicks, nothing else happens.

Any help would be appreciated.

解决方案

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

This will actually "append" them. If you wanted to replace each message each time, you'd use .text() instead of .append().

DEMO (using .text()): http://jsfiddle.net/thVK6/

The i variable will be incremented with each click. When i is equal to messages.length, it will be reset to 0.

So with each click, i is used to grab a new message from the Array.

---

To further explain the increment trick, the % modulo operator returns the remainder when dividing i by messages.length.

When i is equal to messages.length, the remainder is 0, so we're back to the start.

var i = -1;

First click:

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

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

Second click:

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

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

Third click:

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

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

Fourth click:

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

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

...and so i is now 0 again, so it starts over.

---

So the same increment trick, but spelled out as above would be...

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

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

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

这篇关于jQuery的追加不同的文本每一次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！