javascript - JS if/else 访问多个数组元素

Question

我有一把 fiddle http://jsfiddle.net/gq0t4j93/51/显示我的页面，我在尝试访问不同级别的数组时遇到问题。

我使用简单的三元运算进行了此操作，但我新添加的 if/else 语句导致现在没有任何显示。

如果你查看 fiddle 的 JS，你会看到我有一个被注释掉的三元运算符部分

    //   fullContent.innerHTML = '';
//   rightContent.innerHTML = '';
//   leftContent.innerHTML = '';

// fullContent.innerHTML = currentJSONobject.content[i].panel_type_id == 1 ? currentJSONobject.content[i].content : fullContent.innerHTML;

// leftContent.innerHTML = currentJSONobject.content[i].panel_type_id == 2 ? currentJSONobject.content[i].content : leftContent.innerHTML;

// rightContent.innerHTML = currentJSONobject.content[i].panel_type_id == 3 ? currentJSONobject.content[i].content : rightContent.innerHTML;

这是一个仅使用三元运算符的 fiddle http://jsfiddle.net/gq0t4j93/55/

当这些就位并且我删除了上面的 if/else 部分时，它会按预期工作。但我需要使用 if else 语句来决定将哪些内容放入哪个 div，具体取决于页面和面板类型。

我试图将其设置为“如果顶级 (page_id) 数组的 page_type_id 为 n，则检查该页面的每个内容元素的面板类型。如果为 n，则放入此 div，如果为 x放入该 div”

我真正需要弄清楚的是如何正确访问它，以便在每次迭代时，我检查 page_type_id 以便我知道要隐藏哪些 DIVS，然后检查 panel_type_id 以便我知道将哪些内容放入哪个 div 中。

const original_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>"
  },
  {
    "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 fullColumn = document.getElementById('fullColumn');
var leftColumn = document.getElementById('leftColumn');
var rightColumn = document.getElementById('rightColumn');


// loop through original json
// for each item, get page ID and see if we've already created a new Page object for it
// if we have, add the object from the original json to the "content" array of the new page object
// otherwise, create a new Page object to put in our new array
const pages_array = original_json.reduce(function(pages_array, item, index, original_json) {
  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;
}, []);

// Open console to see data
console.clear();
console.log(pages_array); //this prints correct array

setInterval(() => { //here I loop through pages, but i need to loop within here over content to render html
  const currentJSONobject = pages_array[counter];
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;
            }else if(currentJSONobject.content[i].panel_type_id == 3){
                rightContent.innerHTML = currentJSONobject.content[i].content;
            }
        }


    //   fullContent.innerHTML = '';
    //   rightContent.innerHTML = '';
    //   leftContent.innerHTML = '';

    // fullContent.innerHTML = currentJSONobject.content[i].panel_type_id == 1 ? currentJSONobject.content[i].content : fullContent.innerHTML;
    
    // leftContent.innerHTML = currentJSONobject.content[i].panel_type_id == 2 ? currentJSONobject.content[i].content : leftContent.innerHTML;
    
    // rightContent.innerHTML = currentJSONobject.content[i].panel_type_id == 3 ? currentJSONobject.content[i].content : rightContent.innerHTML;

    }


  console.log(pages_array[counter])

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

}, 1500)

<div class="row middle" id="middle" style="background-image: url();">
  
  <div class="col-lg-6 fullColumn">

    <div class="fullContent" id="fullContent" style=" height: 100%; ">

    </div>
  </div>

  <!-- Half Page Divs -->
  <div class="col-lg-6 leftColumn">

    <div class="leftContent" id="leftContent" style=" height: 100%; ">

    </div>
  </div>

  <div class="col-lg-6 rightColumn">

    <div class="rightContent" id="rightContent" style=" height: 100%; ">

    </div>

  </div>
  <!-- End Half Page Divs -->

</div>
<!-- End Row Middle -->

Answer 1

检查控制台是否有错误，大多数时候您会发现打印了相关的错误堆栈。问题出在这里:

var fullColumn = document.getElementById('fullColumn');
var leftColumn = document.getElementById('leftColumn');
var rightColumn = document.getElementById('rightColumn');

这里

<div class="col-lg-6 leftColumn">
  <div class="leftContent" id="leftContent" style=" height: 100%; ">
  </div>
</div>

您正在通过 html 使用类的 ID 进行查询(例如 leftColumn)。使用 querySelector/querySelectorAll 或 getElementsByClassName 或为 html 元素设置正确的 ID。

还有一些 undefined variable ，例如 leftColumnQtr，您试图从中访问 undefined variable 的样式属性。

查看更新后的工作 jsfiddle http://jsfiddle.net/gq0t4j93/74/