Изменить текст несколько раз с помощью 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

Попробуйте это:

working jsFiddle here

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

Вы должны определить переменную 'я', как это:

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 3

Попробуйте это:

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

Answer 4

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