Question

我正在尝试建立一个搜索平台。在搜索结果页面上，我已经有三个包含相同代码的静态div，以显示一些内容。

类似的东西

<div id="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>

<div id="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>

<div id="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>

如何在该div中循环显示内容，使其动态化，以便一旦用户按下按钮；

<button id="search" class="btn" value="Search">

此div中的内容循环，因此我不必继续添加静态div。如何使用JavaScript使其动态化？

编辑

我现在想知道如何用匹配下面JSON响应内容的子项填充div？就像动态加载的列表一样：

[{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": 1567289876354
},
{
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": 1567289876354
},
{
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": 1567289876354
}]

div应该传递JSON列表中的数据，但是div应该根据JSON的响应次数循环。因此，如果JSON响应5个对象，则div应该为5。

Answer 1

如果要通过单击按钮添加相同的HTML元素。请注意，您必须使用 class 而不是 id ，因为 id 在文档中必须是唯一的。

您可以尝试以下方式：

var template = `<div class="result" class="card">
<img src="hello.png" class="card_img" alt="result image">
<h4>OFFLINE</h4>
<p>Yes!!</p>
</div>`;
var occurences = 3;
document.getElementById('search').addEventListener('click',
function(){
  var strHTML = '';
  for(var i=0; i<occurences; i++){
    strHTML += template;
  }
  document.getElementById('container').insertAdjacentHTML('beforeend', strHTML);
});

<div id="container"></div>

<button id="search" class="btn" value="Search">Create</button>

更新：

var listArr = [{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": 1567289876354
},{
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": 1567289876354
},{
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": 1567289876354
}];
document.getElementById('search').addEventListener('click',
function(){
  var strHTML = '';
  listArr.forEach(function(item){
    strHTML += `<div class="Results-item">
            <h4 class="Results-itemName">${item.name}</h4>
            <p class="Results-itemLocation"><b>${item.location}</b></p>
            <p class="Results-itemDetails">Meals: ${item.meals} Close time: ${item.close_time}</p>
            </div>`;
  })
  document.getElementById('container').insertAdjacentHTML('beforeend', strHTML);
});

<div id="container"></div>
<button id="search" class="btn" value="Search">Create</button>

Answer 2

给出对象的JSON Array ，您可以：

创建字符串文字模板
.map()将您的JSON数据导入模板器TPL_Results函数
加入映射结果并插入DOM

const JSON = [{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": '23:30'
},{
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": '22:00'
},{
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": '23:00'
}];

const TPL_Results = item => `<div class="Results-item">
  <h3 class="Results-itemName">${item.name}</h3>
  <p class="Results-itemLocation"><b>${item.location}</b></p>
  <p class="Results-itemDetails">Meals: ${item.meals} Close time: ${item.close_time}</p>
</div>`;

document.querySelector("#results")
	.innerHTML = JSON.map(item => TPL_Results(item)).join('');

<div class="Results" id="results"></div>

Answer 3

如果您希望添加多张具有相同内容的卡片，则可以在javascript中为一张卡片创建一个通用模板，然后将其中的多张卡片附加到容器div中。

如果您希望在按钮单击时附加相同内容的多个div，请使用for循环在click事件之外生成字符串，然后附加所生成的字符串。

在这里，我将容器命名为div .content。另外，请注意，每个元素应具有唯一的ID，因此不应重复ID。

请参见下面的工作示例：

let card = 
  `<div class="card">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" class="card_img" alt="result image">
    <h4>OFFLINE</h4>
    <p>Yes!!</p>
   </div>`;

let amount = 10; // amount of cards to add on button click
let toAppend = '';
for(let i = 0; i < amount; i++) {
  toAppend += card;
}

$("#search").click(function() {
  $('.content').empty().append(toAppend);  
});

img {
  height: 150px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content"></div>
<button id="search" class="btn" value="Search">Click me</button>

根据您编辑的问题：

您可以使用.reduce遍历数据数组，并使用template literals和destruction构造一串单独的div。之后，您可以将此构造的div附加到您的身体或div（在这里，我将其附加到类为content的div上）

let data = [{
    "name": "Malkov Chicken",
    "location": "New york",
    "meals": 5,
    "close_time": 1567289876354
  },
  {
    "name": "Delicious Chops",
    "location": "San francisco",
    "meals": 15,
    "close_time": 1567289876354
  },
  {
    "name": "Banana cultshop",
    "location": "New york",
    "meals": 8,
    "close_time": 1567289876354
  }
];

let html = data.reduce((acc, {name,location, meals, close_time: close}) =>
      acc += `
      <div class='item'>
        <p>${name}</p>
        <p>${location}</p>
        <p>${meals}</p>
        <p>${close}</p>
      </div>`
, ``);

$('.content').append(html);

.item {
  border: 1px solid black;
  margin: 10px 0;
}
p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content"></div>

如何从JSON响应动态填充div

3 个答案: