基于 JSON 间隔更改页面内容

Question

我正在尝试使用显示静态页面内容的 CMS 创建某种“幻灯片更改”功能。我不想轮换 URL，我只想在一段时间后更改页面内容。

我使用 JSON 对象并通过 if/else 语句确定要使用的 Html 以及要使用的内容（来自 JSON）。我想知道是否有一种方法可以循环遍历 JSON 对象的每个元素一段时间？

使用这个 JSON：

[ { "pageID": "93",
   "page_type_id": "2",
   "display_id": "2",
   "slide_order": null,
   "duration": "74",
   "background_img": "images\/bg_rainbow.svg",
   "panel_id": "86",
   "panel_type_id": "2",
   "cont_id": "138",
   "contID": "138",
   "content": "\r\n\r\n\r\n<\/head>\r\n\r\nLeft 93<\/p>\r\n<\/body>\r\n<\/html>" },
 { "pageID": "93",
   "page_type_id": "2",
   "display_id": "2",
   "slide_order": null,
   "duration": "74",
   "background_img": "images\/bg_rainbow.svg",
   "panel_id": "87",
   "panel_type_id": "3",
   "cont_id": "139",
   "contID": "139",
   "content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight 93<\/p>\r\n<\/body>\r\n<\/html>" 
 }]

它成功地将 2 个内容元素加载到适当的 div 中并且逻辑有效。这是一个问题：

如果我有第三个元素的 pageID 94 和不同的内容，并说我想显示第 93 页的内容 15 秒，然后在 15 秒后我想将其更改并隐藏它/显示第 94 页的内容和很快。

这可行吗？

当前脚本示例：

<script type="text/javascript">
let obj = <?php echo $showDisplays; ?>;
var leftContent = document.getElementById('leftContent');
var rightContent = document.getElementById('rightContent');

var fullColumn = document.getElementById('fullColumn');
var leftColumnQtr = document.getElementById('leftColumnQtr');
var rightColumnQtrHalf = document.getElementById('rightColumnQtrHalf');
var rightColumnQtr = document.getElementById('rightColumnQtr');
var leftColumnQtrHalf = document.getElementById('leftColumnQtrHalf');

for (var key in obj){
if(obj[key].page_type_id == 2){

    fullColumn.style.display = "none";
    leftColumnQtrHalf.style.display = "none";
    rightColumnQtrHalf.style.display = "none";
    leftColumnQtr.style.display = "none";
    rightColumnQtr.style.display = "none";


    if(obj[key].panel_type_id == 2){

        leftContent.innerHTML = obj[key].content;

    }else if(obj[key].panel_type_id == 3){

        rightContent.innerHTML = obj[key].content;
    }

}

console.log(obj);
}
</script>

Answer 1

类似这样的：

        // parse json into actual array
        // use a counter to keep track of which object we show data for
        // with each iteration of setInterval:
        //      get reference to current item, 
        //      select some DOM elements, 
        //      update HTML, repeat
        //      if on last item, go back to item 0

        const json = JSON.parse(put_json_here);
        let counter = 0; 

        setInterval(() => {
            const currentJSONObject = json[counter]; 

            fullColumn.style.display = "none";
            leftColumnQtrHalf.style.display = "none";
            rightColumnQtrHalf.style.display = "none";
            leftColumnQtr.style.display = "none";
            rightColumnQtr.style.display = "none";


            if (currentJSONObject.panel_type_id == 2){
                leftContent.innerHTML = currentJSONObject.content;
            } else if (currentJSONObject.panel_type_id == 3){
                rightContent.innerHTML = currentJSONObject.content;
            }

            counter += 1; 
            if (counter === json.length){
                counter = 0; 
            }

        }, 15000)