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

how to dynamically change data based on JSON file using jQuery

本文关键字：动态 数据 文件 JSON 何使用 jQuery 基于      更新时间：2023-09-26
<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."
  },

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

谢谢

添加了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);

尚未测试代码 

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
    $(document).ready(function () {
        var yourJsonData = '[{"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."}]'
        var obj = JSON.parse(yourJsonData);
        $('#rightside').find('h1:first').text(obj[0].name);
        $('#rightside').find('p:first').text(obj[0].year);
        $('#rightside').find('a:first').attr('href', obj[0].wikilink)
        $('#rightside').find('p:eq(3)').text(obj[0].article)
    });

</script>

<body>
  <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>
 </body>
</html>

您的问题可以通过以下方式解决：

.HTML：

<div id="rightside">
<h1 id="nameOfPerson"></h1>
 <p id="year">
 </p>
<a id="wikiLink">Learn More</a>
<p id="article"></p>
<p></p>
<button id="fill">Start</button>
</div>

JQuery ：

var dataObject = [{
"name": "Elizabeth Cady Stanton",
"image": "media/images/elizabeth.jpg",
"year": "1815 – 1902",
"wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
"article": "Whole Article"
}];
$("#fill").click(function() {
setData(dataObject);
});
var setData = function(data) {
$.each(data, function(index, mainData) {
$("#nameOfPerson").text(mainData.name);    
$("#year").text(mainData.year);
$("#wikiLink").attr("href",mainData.wikilink);
$("#article").text(mainData.article)
});
};

通过此代码，您的数据将动态呈现。对于演示，您可以检查我的小提琴：小提琴链接在这里

相关文章：