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秒钟内显示页面93的内容，那么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)

根据JSON间隔更改页面内容

1 个答案: