IF/ELSE 破坏 javascript 和 JSON 交互的逻辑

Question

不知何故，我构建 if/else 语句的方式导致此代码仅在 page_type_id / panel_type_ids 相同时才有效。

对于下面的 sn-p，它首先工作正常，看到 page_type_id 为 2，它使用该逻辑隐藏不必要的 div，然后使用其他语句决定 panel_type_id 2 的内容进入一个 div 而 panel_type_id 3转到另一个。

如果所有元素都具有相同的 page_type_id，它可以正常工作，但如果它从 page_type_id 2 变为 1 或 3，迭代会以某种方式中断，我不知道如何。

下面的 sn-p 在每次迭代时都应该打印：

left 93  right 93
Full Page
Full Page 2
Full Page 3

这是sn-p

const obj = [{
            "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>"
        },
        {
            "pageID": "94",
            "page_type_id": "1",
            "display_id": "2",
            "slide_order": null,
            "duration": "74",
            "background_img": "images\/bg_rainbow.svg",
            "panel_id": "87",
            "panel_type_id": "1",
            "cont_id": "139",
            "contID": "139",
            "content": "\r\n\r\n\r\n<\/head>\r\n\r\nFull Page<\/p>\r\n<\/body>\r\n<\/html>"
        },
        {
            "pageID": "95",
            "page_type_id": "1",
            "display_id": "2",
            "slide_order": null,
            "duration": "74",
            "background_img": "images\/bg_rainbow.svg",
            "panel_id": "87",
            "panel_type_id": "1",
            "cont_id": "139",
            "contID": "139",
            "content": "\r\n\r\n\r\n<\/head>\r\n\r\nFull Page 2<\/p>\r\n<\/body>\r\n<\/html>"
        },
        {
            "pageID": "96",
            "page_type_id": "1",
            "display_id": "2",
            "slide_order": null,
            "duration": "74",
            "background_img": "images\/bg_rainbow.svg",
            "panel_id": "87",
            "panel_type_id": "1",
            "cont_id": "139",
            "contID": "139",
            "content": "\r\n\r\n\r\n<\/head>\r\n\r\nFull Page 3<\/p>\r\n<\/body>\r\n<\/html>"
        },
    ];
    
    let counter = 0;
    
    var fullContent = document.getElementById('fullContent');
    var leftContent = document.getElementById('leftContent');
    var rightContent = document.getElementById('rightContent');
    var topLeftContent = document.getElementById('topLeftContent');
    var topRightContent = document.getElementById('topRightContent');
    var bottomLeftContent = document.getElementById('bottomLeftContent');
    var bottomRightContent = document.getElementById('bottomRightContent');
    
    var fullColumn = document.getElementById('fullColumn');
    var leftColumn = document.getElementById('leftColumn');
    var rightColumn = document.getElementById('rightColumn');
    var leftColumnQtr = document.getElementById('leftColumnQtr');
    var rightColumnQtrHalf = document.getElementById('rightColumnQtrHalf');
    var rightColumnQtr = document.getElementById('rightColumnQtr');
    var leftColumnQtrHalf = document.getElementById('leftColumnQtrHalf');
    
    const pages_array = obj.reduce(function (pages_array, item, index, obj) {
        const current_pageID = item.pageID;
        const exisiting_page = pages_array.find(page => page.pageID === current_pageID);
    
        if (exisiting_page === undefined) {
            const new_Page = {
                pageID: current_pageID,
                content: [item]
            }
            pages_array.push(new_Page);
        } else {
            exisiting_page.content.push(item)
        }
    
        return pages_array;
    }, []);
    
    setInterval(() => {
        const currentJSONobject = pages_array[counter];
    
        fullContent.innerHTML = '';
        rightContent.innerHTML = '';
        leftContent.innerHTML = '';
        topLeftContent.innerHTML = '';
        topRightContent.innerHTML = '';
        bottomLeftContent.innerHTML = '';
        bottomRightContent.innerHTML = '';
    
        for (var i = 0; i < currentJSONobject.content.length; i++) {
    
            if (currentJSONobject.content[i].page_type_id == 1) {
    
                leftColumn.style.display = "none";
                rightColumn.style.display = "none";
                leftColumnQtr.style.display = "none";
                rightColumnQtrHalf.style.display = "none";
                rightColumnQtr.style.display = "none";
                leftColumnQtrHalf.style.display = "none";
    
                if (currentJSONobject.content[i].panel_type_id == 1) {
                    fullContent.innerHTML = currentJSONobject.content[i].content;
                }
    
            } else if (currentJSONobject.content[i].page_type_id == 2) {
    
                fullColumn.style.display = "none";
                leftColumnQtr.style.display = "none";
                rightColumnQtrHalf.style.display = "none";
                rightColumnQtr.style.display = "none";
                leftColumnQtrHalf.style.display = "none";
    
                if (currentJSONobject.content[i].panel_type_id == 2) {
                    leftContent.innerHTML = currentJSONobject.content[i].content;
                }
                if (currentJSONobject.content[i].panel_type_id == 3) {
                    rightContent.innerHTML = currentJSONobject.content[i].content;
                }
    
            } 
    
        }
    
        console.log(pages_array[counter])
    
        counter += 1;
        if (counter === pages_array.length) {
            counter = 0;
        }
    
    }, 1500)
    console.log(obj);

<div class="row middle" id="middle" style="background-image: url();">
        <!-- Full Page Divs -->
        <div class="col-lg-12" id="fullColumn">
            <div class="fullContent" id="fullContent" style="height: 100%; ">
            </div>
        </div>
        <!-- End Full Page Divs -->
    
        <!-- Half Page Divs -->
        <div class="col-lg-6 leftColumn" id="leftColumn">
    
            <div class="leftContent" id="leftContent" style=" height: 100%; ">
    
            </div>
        </div>
    
        <div class="col-lg-6 rightColumn" id="rightColumn">
    
            <div class="rightContent" id="rightContent" style=" height: 100%; ">
    
            </div>
    
        </div>
        <!-- End Half Page Divs -->
    
 
    </div>
    <!-- End Row Middle -->

Answer 1

为了简化您的代码，为什么不在函数中提取for loop 中的逻辑，并在该函数内部使用switch 而不是这个疯狂的if/else if/else。

for(var i = 0; i < currentJSONobject.content.length; i++){
    myFn(currentJSONobject, index)
}

function myFn(jsonObj, index) {
    switch (jsonObj.content[index].page_type_id ) {
        case 1:
            //...<logic for id 1>
        break;
        case 2:
            //...<logic for id 2>
        break:
        default:
        //... etc
    }
}

稍微简化代码后，可能会更容易查明问题所在。