Question

我有一系列内容，简化后如下：

[
 { content_type: 1, content_body: "some text" },

 { content_type: 1, content_body: "some text" },

 { content_type: 2, content_body: "media link" },

 { content_type: 1, content_body: "some text" }
]

我现在需要映射这个数组，并有一个switch语句检查content_type并基于它呈现HTML，所以类似（注意下面的语法使用jsx，所以它看起来可能与vanila JavaScript不同，但它是非常自我解释的。）

switch(item.content_type) {
 case 1:
   render (
     <div class="text_content">
       <p>{item.content_body}</p>
     </div>

   )
  case 2:
   render (
     <div class="text_media">
       <div>{item.content_body}</div>
     </div>

   )
}

现在问题，如果相同的内容类型在数组中一个接一个地跟随（例如前两个条目，例如content_type 1），我希望它们的content_bodies在一个div内呈现，所以

<div class="text_content">
  <p>{item.content_body}</p>
  <p>{item.content_body}</p>
</div>

然后继续，如果下一个content_type不同。（这可以在应用程序中重复多次，也只对content_type 1重复一次。）

这会是什么方法？请记住，我不能操纵数组来做一些事情，比如在对象中嵌套这些内容。

Answer 1

如果我理解你的方法，那么这应该可行。 http://codepen.io/anon/pen/zrMEjz - 工作示例

下面的代码。逻辑是在每次迭代时它将检查元素是否存在然后在其中插入新元素，如果不存在，则创建该元素并在其中添加元素。（注意：jQuery包含在库中，你可以使用基础JS，但我想用稍微少的代码向你展示这个想法）

＆＃13;

// sample array 
var arr = [
  {content_type: 1, content_body: "some text"},
  {content_type: 1, content_body: "some text"},
  {content_type: 2, content_body: "media link"},
  {content_type: 1, content_body: "some text"}
  ];

for(var i = 0; i < arr.length; i++) {
  var currentElement = arr[i]; console.log(currentElement.content_body);
  
  switch(currentElement.content_type) {
    case 1:
      var el = jQuery('.text_content');
      
      if(el.length) {
        el.append('<p>' + currentElement.content_body + '</p>');
      } else {
        var el = jQuery('<div class="text_content"></div>')
        el.append('<p>' + currentElement.content_body + '</p>');
        jQuery('body').append(el);
      }
      break;
    case 2:
      var el = jQuery('.text_media');
      
      if(el.length) {
        el.append('<div>' + currentElement.content_body + '</div>');
      } else {
        var el = jQuery('<div class="text_media"></div>');
        el.append('<p>' + currentElement.content_body + '</p>');
        jQuery('body').append(el);
      }
      break;
  }
}

＆＃13;

.text_content {
  border: 1px solid black;
}

.text_content p {
  border: 1px solid yellowgreen;
}

.text_media {
  border: 1px solid blue;
}

＆＃13;

<html>
  <body>
    
  </body>
</html>

＆＃13;

我希望这会有所帮助，如果需要调整，请告诉我。欢呼声。

切换语句仅在项类型更改时返回结果

1 个答案: