我的第一个数组并不是我想的那么简单(尽管我对js的了解很少)。
我试图在单击事件上遍历数组(按顺序)。因此,在前端,将为您提供一个事实,然后单击一个按钮以查看下一个事实...简单的想法。
问:当一切正常时,在数组的末尾,当用户单击以查看下一个时,会发生什么?我将如何处理呢?
JS
$(document).ready( function() {
function factsInit() {
// Define all facts
var factText = [
"Oxford won the first Boat Race, which took place on 10th June 1829 at Henley-on-Thames.",
"In 2003, Oxford won the closest ever Boat Race by just one foot.",
"Oxford coxswain Sue Brown became the first woman to participate in The Boat Race in 1981.",
"Oxford's victorious 2009 Blue Boat was the heaviest in the history of the race at an average of 15st 9lb 13oz (99.7kg) per rower.",
"In 2012, Oxford's reserve crew, Isis, beat Goldie by 5 lengths to set the course record for the reserve race at 16:41."
],
factImage = [
"/clients/oubc/assets/img/factimage_firstrace.jpg",
"/clients/oubc/assets/img/factimage_oubc2003.jpg",
"/clients/oubc/assets/img/factimage_oubcsuebrown.jpg",
"/clients/oubc/assets/img/factimage_oubc2009heaviestever.jpg",
"/clients/oubc/assets/img/factimage_isis2012.jpg"
];
// Apply these facts
$('#widget_facts .fact_text').html(factText[0]);
$('#widget_facts .fact_image > *').attr('src', factImage[0]);
// Go to next fact on click
$('#widget_facts .link > a').click( function() {
$('#widget_facts .fact_text').html(factText++);
$('#widget_facts .fact_image > *').attr('src', factImage++);
});
}
// Run the first fact
factsInit();
});
最佳答案
基本上,您想增加一个计数器变量,并使用它来访问您拥有的数组的索引。
//declare the counter var
var factCounter = 0;
//setup event handler for click event
$('#widget_facts .link > a').click( function() {
//change the text based on the current counter value
$('#widget_facts .fact_text').html(factText[factCounter]);
//change the image based on the current counter value
$('#widget_facts .fact_image > *').attr('src', factImage[factCounter]);
//increment the counter var for next time
factCounter++;
//if the counter var is too large for the number of indexes we've got to work with
if (factCounter >= factText.length) {
//start over at zero
factCounter = 0;
}
});
如果从第一个显示开始并希望在第一次单击时显示第二个索引,也可以在更新值之前放置
factCounter
增量代码。由于数组的索引为零,因此检查计数器是否大于或等于索引数基本上是检查索引是否存在。如果当前计数器值等于索引数,则该计数器值处不存在索引(由于从零开始而不是从1开始)。