jquery - 使用 jQuery 多次更改文本

Question

每次单击按钮时如何更改数组中的文本？所以我有：

<div class="buttons">
  <a href="#" class="btn">Button 1</a>
  <a href="#" class="btn">Button 2</a>
  <a href="#" class="btn">Button 3</a>
</div>

<div class="text"></text>

我有一个数组：

var arr = ['First', 'Second', 'Third.'];

$(".btn").on('click', function (e) {
    $(".text").text(arr[0]);
});

我该如何做到这一点，以便如果我单击任何这些“.btn”，它将循环遍历数组并淡入新文本？

Answer 1

试试这个：

在这里工作 jsFiddle

var arr = ['First', 'Second', 'Third.'];
var cnt = 0;

$(".btn").on('click', function (e) {
    //alert(arr[cnt]);
    $(".text").hide();
    $(".text").text(arr[cnt]).fadeIn(1500);
    cnt++;
    if (cnt > 2) cnt = 0;
});

Answer 2

$(".btn").each(function (index) {
    $(this).click(function () {
        $(".text").text(arr[index]);
    });
});

Answer 3

您应该像这样定义一个变量“i”：

var i = 0;

var arr = ['First', 'Second', 'Third.'];

$(".btn").on('click', function (e) {
    $(".text").text(arr[i]);
    if (i < 2) i += 1;
    else i = 0;
});

Answer 4

试试这个：

<div class="buttons">
  <a href="#" class="btn" index="0">Button 1</a>
  <a href="#" class="btn" index="1">Button 2</a>
  <a href="#" class="btn" index="2">Button 3</a>
</div>

<div class="text"></text>

var arr = ['First', 'Second', 'Third.'];

$(".btn").on('click', function (e) {
    var index = $(this).attr("index");
    $(".text").text(arr[index]);
});