JQuery: Jak wyświetlać tablicę tagów akapitu jeden po drugim przy każdym kliknięciu?

Question

var sentences = ['sentenceone', 'another sentence', 'another sentence again']; 

$(".btn").on('click', function() { 

    for(var i=0; i < sentences.length; i++) { 
     samplebox.innerHTML += '<p>'+sentences[i]+'</p>'; 
    } 
}); 

Wyświetla to wszystko jednym kliknięciem. Jak to naprawić?

Answer 1

Można wyświetla akapity jeden po drugim, jak ta:

var sentences = ['sentenceone', 'another sentence', 'another sentence again']; 
var i = 0; 

$(".btn").on('click', function() { 

    if (i < sentences.length) { 
    samplebox.innerHTML += '<p>' + sentences[i] + '</p>'; 
    i++; 
    } 

}); 

Answer 2

<button class="btn" data-step="1">Click here</button> 

var sentences = ['sentenceone', 'another sentence', 'another sentence again']; 

$(".btn").on('click', function() { 
     var limit = parseInt($(this).attr("data-step")) - 1; 
     for(var i=0; i < limit; i++) { 
      samplebox.innerHTML += '<p>'+sentences[i]+'</p>'; 
     } 
     $(this).attr("data-step") = limit + 2; 
    });