javascript - 如何使用 jQuery 动态更改基于 JSON 文件的数据

Question

<div id="rightside">
            <h1>Name Of Person</h1>
            <p>1900-1950
                <p><a href="linktowiki">Learn More</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at
                        convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
                    <p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
                    <button>Pause</button>
        </div>

我的 div 看起来像这样。我想用我从 JSON 文件中获取的数据替换它。但是我只想一次显示 1 个条目并使其在条目之间设置动画(不需要很花哨)。

我的问题是如何让 jQuery 在我的 JSON 数据之间切换？

我的 JSON 数据看起来像

[
  {
    "name": "Elizabeth Cady Stanton",
    "image": "media/images/elizabeth.jpg",
    "year": "1815 – 1902",
    "wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
    "article": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor. Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nil."
  },

如果有任何帮助或示例链接，我将不胜感激。

谢谢

Answer 1

已添加 data-index跟踪我们正在显示的数据索引

<div id="rightside" data-index='-1'>..</div>

它会以每 5 秒轮换的方式更改您的数据。

setTimeout(function(){
        var yourJsonData = [{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"},{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"}];
        var currentIndex = $("#rightside").attr('data-index');
        var totalLengthOfData = yourJsonData.length;
        var indexToShow = currentIndex+1;
        if(indexToShow > totalLengthOfData){
           indexToShow=0;
        }
        $("#rightside").attr('data-index',indexToShow);
        var dataToAppend =  yourJsonData[indexToShow];

        $("#rightside").children().remove();
        $("#rightside").append("<h1>"+yourJsonData['name']+"</h1>").
                        append("<p>"+yourJsonData['year']+"</p><p><a href='"+yourJsonData['linktowiki']+"'>learn more</a></p>"); 

     },5000);

还没有测试代码