在数组中循环出错

Question

我正在尝试制作一个简单的"应用程序"，当单击按钮时，h1将更改为存储在数组中的笑话之一。JS代码如下：

var jokes = [
"Knock knock. Who’s there? Cow says. Cow says who? No, a cow says mooooo!",
"Knock knock. Who’s there? Etch. Etch who? Bless you, friend."
]
jokes.forEach(function(item, index, array){
$('.btn').click(function(){
document.querySelector('.h1').innerHTML = jokes;  
});
})

功能是存在的，但我觉得我把逻辑搞砸了。每当我点击按钮时，h1就会更改为数组中的每个笑话，而不是一次一个，我该如何解决这个问题？非常感谢您抽出时间！

Answer 1

您可以只使用jQuery而不混合香草。

通过在每次点击中选择一个随机数组，你可以每次显示一个不同的笑话：

使用if..else语句的Fiddle示例。

随机建议：

var jokes = [
"Knock knock. Who’s there? Cow says. Cow says who? No, a cow says mooooo!",
"Knock knock. Who’s there? Etch. Etch who? Bless you, friend."
]
$('.btn').click(function() {
var random_index = Math.floor(Math.random() * jokes.length) + 0;
$('.h1').html(jokes[random_index]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn">CHANGE</button>
<h1 class='h1'>INITIAL H1</h1>

if..else建议：

var joke_index = 0;
var jokes = [
"Knock knock. Who’s there? Cow says. Cow says who? No, a cow says mooooo!",
"Knock knock. Who’s there? Etch. Etch who? Bless you, friend."
]
$('.btn').click(function() {
if (joke_index === jokes.length - 1)
joke_index = 0;
else
joke_index++;
$('.h1').html(jokes[joke_index]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn">CHANGE</button>
<h1 class='h1'>INITIAL H1</h1>

Answer 2

您可以使用JQ的文本方法来解决此问题：以下代码运行良好。您只需要将随机数传递给索引，以便每次单击按钮时它都会替换该值。

var jokes = [
"Knock knock. Who’s there? Cow says. Cow says who? No, a cow says mooooo!",
"Knock knock. Who’s there? Etch. Etch who? Bless you, friend."
]
jokes.forEach(function(item, index, array){
$('.myBtn').click(function(){
$('.myClass').text(jokes[0]);  
});
})