jQuery добавлять разные тексты каждый клик - PullRequest
Новая
       23

jQuery добавлять разные тексты каждый клик

0 голосов
/ 19 января 2012

У меня есть базовая функция jQuery: 

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

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 19 января 2012 
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().

ДЕМО (с использованием .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/

1 голос
/ 19 января 2012

Одна возможность: 

(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/

0 голосов
/ 19 января 2012

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