循环浏览jQuery中的文本？

Question

我试图这样做,当我点击一个按钮时,文本将会改变.我已经能够实现这一点,但是,我想列出一个文本列表.对于每个按钮单击,文本应更改为新的.

我只能改变它一次.我不知道怎么回事.这是我的代码:

$(document).ready(function(){
    $(".button").click(function(){
        $("#text").text("I have changed!");
    });
});

Answer 1

你需要一个current计数器和一个数组texts.

• 第1步:在数组中添加文本.
• 第2步:初始化计数.
• 第3步:以编程方式添加第一个值.
• 第4步:增加计数.
• 第5步:更新文本.
• 第6步:确保没有边界.所以使用模数.

片段

$(document).ready(function() {
  // Step 1: Add the texts in an array.
  var texts = ["Hello, World!", "Hello, Praveen!", "Hello, StackOverflow"];
  // Step 2: Initialize a count.
  var count = 0;
  // Step 3: Programmatically add the first value.
  $("#text").text(texts[count]);
  $(".button").click(function() {
    // Step 4: Increment the count.
    count++;
    // Step 5: Update the text.
    // Step 6: Make sure you don't run of boundaries. So use modulus.
    $("#text").text(texts[count % texts.length]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="text"></div>
<button class="button">Change</button>