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

Question

我需要将数组中的项目与 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 -->

这是我为测试这个想法而创建的函数。现在，该函数只显示数组中的每个标题。我不想附加数据，我想替换它。也许替换？

function next_event() {
    $.each(data, function(i,item){ // notice the item


    $('#page-title').append(item.title);


});
}

Answer 1

您只需要更改 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);
});

在jsfiddle 中查看演示。