Question

我的第一个数组，我认为非常简单的不是（尽管我对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();
});

Answer 1

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

//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增量代码。

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

将html更改为数组中的下一项 - jquery

1 个答案: