单击按钮上的数组元素更改标签内容

Question

我如何在每个按钮上使用每个数组元素的每个数组元素的内部html循环？

https://jsfiddle.net/s0toedfh/2/

var fruits = ["Banana", "Orange", "Apple", "Mango"]; $("p").html(fruits[0]);
$( "button" ).click(function() { $("p").html(fruits[1]); });

Answer 1

尝试这个，

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
var index=0;
$( "button" ).click(function() {
    $("p").html(fruits[index]);
    index++;
    if(index>=fruits.length)index=0;
});

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var index = 0;
$("button").click(function() {
  $("p").html(fruits[index]);
  index++;
  if (index >= fruits.length) index = 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
</p>
<br>
<button>
click
</button>

或者，您可以尝试，

var fruits = ["Banana", "Orange", "Apple", "Mango"],
    index = 0,
    totalFruits=fruits.length;
$("button").click(function() {
    $("p").html(fruits[index++ % totalFruits]); // increment and get index
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
</p>
<br>
<button>
click
</button>

Answer 2

您可以使用变量来计算单击发生的次数。

可以将外部定义的变量定义为0，每次点击时，它可以通过水果列表的长度进行递增并进行modulo，以确保它始终保持在0-length_of_fruits

之间

这是一个实现

var fruits = ["Banana", "Orange", "Apple", "Mango"];
$("p").html(fruits[0]);
var count = 0
$("button").click(function() {
  count = (count + 1) % fruits.length
  $("p").html(fruits[count]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<br>
<button>  click  </button>

Answer 3

更简单的一个：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var index = 0;
$("button").click(function() {
  $("p").html(fruits[index%fruits.length]);
  index++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>&nbsp;</p>
<br>
<button>
click
</button>