Как вставить элемент за элементом в JS - PullRequest
0 голосов
/ 18 января 2020

Так что у меня есть это для каждой функции и ее в основном предмет в магазине. я хочу, чтобы он взял информацию о контейнере, марку и элемент в html для каждого предполагаемого имени.

<body>
<div id="Collection" style="padding: 20vh 5% 5% 5%;">


 </div>
 </body>
 <script>
    var ItemCollection =

[
    {Name:'ivy',Price:'200$',Picture:''},
    {Name:'eyvo',Price:'300$',Picture:''},
    {Name:'leevo',Price:'400$',Picture:''},




];


   ItemCollection.forEach(generateItem);
$('#Collection').append(content);

      function generateItem(item, index,){
  var body,item,

 body = document.getElementById('Collection').innerHTML ='\n' +
     '        <li class="Shoe"><a href="#'+ item.Name +'\'">\n' +
     '            <div>\n' +
     '                <img class="ItemPicture"\n' +
     '                     

 src="https://assets.adidas.com/images/w_385,h_385,f_auto,q_auto:
   sensitive,fl_lossy/1783d3e50c9249ab8f75ab280102cb94_9366/
  ivy-park-nite-jogger-shoes.jpg">\n' +
     '\n' +
     '            </div>\n' +
     '            <div class="ItemInfo">\n' +
     '                <p>' + item.Name + '</p>\n' +
     '                <p>'+ item.Price +'</p>\n' +
     '            </div>\n' +
     '            </a>\n' +
     '        </li>\n';

 content = body;

   }
  </script>

В настоящее время проблема заключается в том, что он просто переписывает элемент, который существует в данный момент, и в результате получается последний элемент из контейнера. Я хотел бы иметь 3 элемента в конце функции внутри div с именем collection.

Ответы [ 2 ]

0 голосов
/ 19 января 2020

Вы сбрасываете внутренний Html каждый раз, когда выполняете свою функцию. Замените '=' на + =, и он должен работать так:

document.getElementById('Collection').innerHTML += ...your markup as string
0 голосов
/ 18 января 2020

Пара вещей, которые я там вижу,

  • Всякий раз, когда вы выполняете body = document.getElementById('Collection').innerHTML = ..., вы будете переопределять элемент 'Collection'. Просто объедините результирующую строку с вашей переменной тела.
  • Вы забыли добавить «+» в точке назначения вашей переменной содержимого, в любом случае вы просто переопределяете ее новыми данными. Вместо этого используйте content += body.
  • Также применение этих исправлений позволит вам получить 4 элемента: оригинальный элемент li и недавно добавленные элементы. Может сначала очистить элемент «Коллекция» с помощью document.getElementById('Collection').innerHTML = '' ItemCollection.forEach(generateItem);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...