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

これを試して：

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