在对话框中一次显示多个对象答案

【问题标题】：Displaying multiple objects one at a time in a dialog box在对话框中一次显示多个对象
【发布时间】：2017-08-22 21:04:41
【问题描述】：

我完全被困住了。我试图在弹出对话框中单独显示对象，但我找不到有关如何执行此操作的任何信息。我可以一次显示它们，但这不是我想要做的。

$.each(needs, function(i, v) {
  console.info(v);
  var brand = v.brand;
  console.info(brand);
  var model = v.model;
  var growerID = v.growerID;
  if (v.portalID === null) {
    var unmatched = {
      brand: v.brand,
      model: v.model,
      growerID: v.growerID
    }
    newmatch.push(unmatched);
    console.info(newmatch);
  } else {
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrap">
  <form>
    <div class="fleft">
      <div>
        <img src="/app/public/css/images/logo.png">
      </div>
      <div class="form-group brand ui-corner-all">
        <label for="owner">Brand</label>
        <div class="card-type ui-corner-all " id="brand"></div>
      </div>
      <div class="form-group ui-corner-all">
        <label for="model">Model</label>
        <div class="model ui-corner-all " id="trxio_model"></div>
      </div>
      <div class="form-group growerId">
        <label for="growerId">Grower ID</label>
        <div class="card-type ui-corner-all " id="growerId"></div>
      </div>
      <div class="form-group vendor ui-corner-all ">
        <label for="owner">Default Vendor</label>
        <div class="card-type ui-corner-all " id="vendor"></div>
      </div>
      <button type="submit" class="btn btn-lg">Update Product Info</button>
    </div>
  </form>
</div>

任何帮助将不胜感激。谢谢。

【问题讨论】：

个人是什么意思？一次喜欢一个？
是的，我想在对话框中显示一个对象，然后当按下一个按钮时，将下一个对象渲染到对话框中。基本上，如果用户不想要第一项，他们可以跳到下一项

标签： javascript jquery html object

【解决方案1】：

因为你只提供了部分代码，我写了一个小例子，如何迭代汽车集合以及如何将它们渲染到 HTML 容器中。希望这会引导您找到解决方案：

var cars = [
  {
    name: "VW",
    year: 1988,
  },
  {
    name: "Honda",
    year: 1999,
  },
  {
    name: "BMW",
    year: 2005,
  }
]

const container = document.querySelector('#container')

const toRender = cars.map(car => `<div class="car"><span class="name">${car.name}</span> <span class="year">${car.year}</span></div>`)

container.innerHTML = toRender.join('')

.container {
  padding: 10;
  background: #f0f0f0;
}

.car {
  margin: 10px 0; 
}

.name {
  display: inline-block;
  padding: 5px;
  color: #ff0000;
  min-width: 100px;
}

.year {
  color: blue;
}

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：