Javascript 根据数组检查数据，并使用jquery移动功能显示下一个元素

我需要一些指导来比较数组中的项目和html页面中的项目。首先，我有一个数组，其中填充了需要显示的各种元素。我的目标是获取当前显示的html页面（或我正在显示的其他div）标题中的当前内容，并将其与数组中的每个元素进行比较。一旦找到匹配项，我想在html页面中显示下一个索引的内容。单击“下一步”按钮时应执行此功能。如果有人能帮上忙，我将不胜感激

以下是阵列中填充的内容：

var item = {title: displayTitle, link: linkUrl, infoDescription: infoDisplay, Date: new Date(eventDate), Region: region,}

这是我想调用函数的页面和按钮：

<div data-role="page" id="eventPage"> <!-- Start Event Page -->
    <div data-role="header" data-position="fixed" data-theme="b">
            <a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
            <h1>Mobile</h1>
            <a href="#" onclick="next_event()" target="_blank" data-role="button" class="next"  data-icon="forward" data-iconpos="notext">Next</a>

    </div>
    <div data-role="content">
        <div id="page-title"></div>
        <div id="page-date"></div>
        <div id="page-content"></div>
    </div> 

    <div data-role="footer" data-theme="d" data-position="fixed"></div>
</div><!-- End eventPage -->

---

您只需要更改DOM节点的文本。首先，您必须缓存节点，以防止每次单击按钮时选择它们

var nodes = {
    title: $('#page-title'),
    date: $('#page-date'),
    content: $('#page-content'),
};

您还可以缓存当前选定项目的索引：

var currentIndex = 0;

每次按下按钮时，计数器应递增，节点的文本也应更改：

$('.next').click(function () {
    currentIndex++;
    if (currentIndex >= data.length) {
        currentIndex = 0;
    }
    nodes.title.text(data[currentIndex].title);
    nodes.date.text(data[currentIndex].date);
    nodes.content.text(data[currentIndex].infoDescription);
});

---

请参阅中的演示。

感谢您提供的解决方案，JSFIDLE正是我想要的！然而，我把它放在我的代码中，并没有运气进行测试。我在任何函数之外声明了var data=[]，因此我不确定问题出在哪里。有什么建议吗？这里只显示了：event.returnValue已弃用。请改用标准event.preventDefault（）。此外，在我执行按钮单击之前出现了该错误。当我单击下一步按钮时，控制台中没有显示任何内容。是否包含jQuery？能否创建一个JSFIDLE并尽可能多地发布代码。包括jQuery（JSFIDLE页面的左上角）2。html呢？我也很高兴看到它

$('.next').click(function () {
    currentIndex++;
    if (currentIndex >= data.length) {
        currentIndex = 0;
    }
    nodes.title.text(data[currentIndex].title);
    nodes.date.text(data[currentIndex].date);
    nodes.content.text(data[currentIndex].infoDescription);
});