0

我的第一个数组，我认为很简单，但事实并非如此（尽管我对 js 的了解很少）。

我正在尝试在单击事件上遍历数组（按顺序）。因此，在前端，您将看到一个事实，您将单击一个按钮来查看下一个事实……简单的想法。

Q：当一切正常时，在数组的末尾，当用户点击查看下一个时会发生什么？我将如何处理？

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();
});
4

1 回答 1

2

基本上你想增加一个计数器变量，并用它来访问你所拥有的数组的索引。

//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如果您从第一个显示开始并希望在第一次单击时显示第二个索引，您还可以在更新值之前放置增量代码。

由于数组是零索引的，因此检查计数器是否大于或等于索引数基本上是检查索引是否存在。如果当前计数器值等于索引的数量，则不存在计数器值处的索引（由于从零开始而不是从一开始）。

于 2013-10-24T16:11:47.777 回答