Question

此小提琴有几个（希望很小）问题

该功能正在运行，但我的逻辑一路搞乱了。

我将“内容”的数组嵌套在“ pageID”的主数组中。问题在于，对于HTML渲染，我需要首先查看第一个“页面”元素的page_type_id，然后查看内容元素的panel_type_id。

我的第一个问题是我在第107行的forloop似乎只访问奇数的pageID，但是如果我删除它，它将访问所有的奇数。

但是另一个真正的问题是在109行，我想更改

if (currentJSONobject.content.length >= 1) {
  leftContent.innerHTML = currentJSONobject.content[i].content;
}
if (currentJSONobject.content.length >= 2) {
  rightContent.innerHTML = currentJSONobject.content[i].content;
} else {
  rightContent.innerHTML = '';
}

要改为使用page_type_id和panel_type_id而不是长度，因此：

if (currentJSONobject.page_type_id == 2) {
  fullColumn.style.display = "none";
  if (currentJSONobject.content.panel_type_id == 2) {
    leftContent.innerHTML = currentJSONobject.content[i].content;
  }
  if (currentJSONobject.content.panel_type_id == 3) {
    rightContent.innerHTML = currentJSONobject.content[i].content;
  }
}

这看起来很简单，但我不知道该如何真正地更改它。

同样，它可以正确循环并显示内容，但是我需要能够发展几种页面和面板类型的逻辑，希望有人可以看到我在哪里出问题了

更新：

从可接受的答案中的三元切换到if / else

for(var i = 0; i < currentJSONobject.content.length; i++){

    fullContent.innerHTML = '';
    rightContent.innerHTML = '';
    leftContent.innerHTML = '';
    topLeftContent = '';
    topRightContent = '';
    bottomLeftContent = '';
    bottomRightContent = '';

    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;
        }
    }


//   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;

}

Answer 1

您可以执行以下操作。如果您有一定数量的页面类型，当遇到这些页面类型时您想要以不同的方式处理，那么您实际上会想要if（三元数）。我不确定如何显示信息，例如是否要显示重复的93（for循环遍历每个93，但是仅执行equals运算符会覆盖它，因此一次仅显示一个）。或者，如果您想同时显示任何右侧，左侧或全部内容。如果要同时显示右，左和完整，则需要用full / left / rightContent.innerHTML替换三元的“ else”部分的''以保留其值。或替换为普通的If语句。

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
  fullContent.innerHTML = '';
  rightContent.innerHTML = '';
  leftContent.innerHTML = '';
  const currentJSONobject = pages_array[counter];
  for(var i = 0; i < currentJSONobject.content.length; i++){
  	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 -->

比较javascript

1 个答案: