Как отрисовать элемент на странице?

Question

[Юрий Иванов]

отрисовываю карточки товаров, на каждой первой есть эмблема "NEW"
на каждой второй "Хит"
я ничего умнее чем сделать так не придумал, как это сделать по-человечески, подскажите пожалуйста

function createSauseItem () {
  for(let i=0; i <sauseName.length; i++) {
    if(i < 1) {
    let newItem = document.createElement('div');
    newItem.className = ('item sauce__item');
    const itemText = `<div class="item sauce__item">
<b>    <div class="item__promo sause-item__promo">NEW</div></b>
    <img draggable="false"
    src="${(sauseImg[i])}"
    alt="sause"
    class="item__image sauce__image"
    />
    <div class="item__name sauce__name">${(sauseName[i])}</div>
    <div class="item__descr desserts__descr">${(sauseDescr[i])}</div>
    <div class="item__bottom_choise">
    <button class="btnchoise sause__button">Выбрать</button>
    <div class="item__costs sauce__costst" data-price="${(dataPrice[i])}">${(sauseCosts[i])}</div>
    </div>
    </div>`;
    newItem.innerText = itemText;
    sause.insertAdjacentHTML('beforeend', itemText)
    } else if (i < 2 ) {
    let newItem = document.createElement('div');
    newItem.className = ('item sauce__item');
    const itemText = `<div class="item sauce__item">
    <b><div class="item__promo sause-item__promo">ХИТ</div></b>
    <img draggable="false"
    src="${(sauseImg[i])}"
    alt="sause"
    class="item__image sauce__image"
    />
    <div class="item__name sauce__name">${(sauseName[i])}</div>
    <div class="item__descr desserts__descr">${(sauseDescr[i])}</div>
    <div class="item__bottom_choise">
    <button class="btnchoise sause__button">Выбрать</button>
    <div class="item__costs sauce__costst" data-price="${(dataPrice[i])}">${(sauseCosts[i])}</div>
    </div>
    </div>`;
    newItem.innerText = itemText;
    sause.insertAdjacentHTML('beforeend', itemText)
    } else {
      let newItem = document.createElement('div');
    newItem.className = ('item sauce__item');
    const itemText = `<div class="item sauce__item">
    <img draggable="false"
    src="${(sauseImg[i])}"
    alt="sause"
    class="item__image sauce__image"
    />
    <div class="item__name sauce__name">${(sauseName[i])}</div>
    <div class="item__descr desserts__descr">${(sauseDescr[i])}</div>
    <div class="item__bottom_choise">
    <button class="btnchoise sause__button">Выбрать</button>
    <div class="item__costs sauce__costst" data-price="${(dataPrice[i])}">${(sauseCosts[i])}</div>
    </div>
    </div>`;
    newItem.innerText = itemText;
    sause.insertAdjacentHTML('beforeend', itemText)
    }
  }
}

Comments

[godsplane]

В чем проблема сдлеать это через css?

[Юрий Иванов]

godsplane, через nth-child(n)?

[godsplane]

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

[Юрий Иванов]

godsplane, Хорошо, спасибо за помощь

Answer 1

[Kitty Meow]

Для начала можно упростить Ваш код:

function createSauseItem() {
    for (let i = 0; i < sauseName.length; i++) {
        let newItem = document.createElement('div');
        newItem.className = ('item sauce__item');
        const itemText = `<div class="item sauce__item">
                          ${i === 0 ? `<b><div class="item__promo sause-item__promo">NEW</div></b>` : i === 1 ? `<b><div class="item__promo sause-item__promo">ХИТ</div></b>` : 0}
                          <img draggable="false"
                          src="${(sauseImg[i])}"
                          alt="sause"
                          class="item__image sauce__image"
                          />
                          <div class="item__name sauce__name">${(sauseName[i])}</div>
                          <div class="item__descr desserts__descr">${(sauseDescr[i])}</div>
                          <div class="item__bottom_choise">
                          <button class="btnchoise sause__button">Выбрать</button>
                          <div class="item__costs sauce__costst" data-price="${(dataPrice[i])}">${(sauseCosts[i])}</div>
                          </div>
                          </div>`;
        newItem.innerText = itemText;
        sause.insertAdjacentHTML('beforeend', itemText)
    }
}

Советую использовать для работы какой-нибудь фреймворк, желательно просто подключить себе VueJS через CDN.

Также можно использовать псевдокласс :nth-child, если изначально создавать карточки с теми же ХИТ/NEW, но display: none; и в :nth-clild1/2 давать display: block соответственному элементу.

Comments

[Юрий Иванов]

Спасибо большое за помощь!

Answer 2

[bondarenkoIlya]

Делаешь массив объектов, перебираешь его с помощью map.
В ютубе вбей "карточка товара js"

Answer 3

[ThunderCat]

Обычно это делается на стороне сервера. Яваскрипт для этого не нужен.

Comments

[Юрий Иванов]

я знаю, но т.к я учусь я придумываю себе задачи, но не всегда их получается сразу реализовать
что бы не тратить уйму времени гуглеж, прошу мне помочь!!)хотя бы в каком направлении думать

[ThunderCat]

Юрий Иванов, так а чем помочь то? Тупо при выводе из бэкенда проверяется свойство элемента - новый, хит, малахит - и выводится нужный блок. Как вариант - все блоки создаются внутри враппера, но с дисплей нон, и только нужный без него. Короче, на фронте такая хрень тупо неудобна, нужно во первых как-то передать на фронт это состояние, и еще потом его обработать. Проще сразу все сделать на бэкенде.

[Юрий Иванов]

ThunderCat, ну я знаю, что часто фронту прилетают массивы данных от бэка и как фронтенд разработчику надо уметь обрабатывать данные и их отрисовывать
поэтому я делаю дивы и потом их тренируюсь отрисовывать
вроде вполне себе практический навык

[ThunderCat]

Юрий Иванов,

вроде вполне себе практический навык

Это не так работает. Если речь идет о клиентсайд ренедере, то обычно используются какие-то движки типа вуя или ангулара, где все это сгруппировано по компонентам, сырым хтмлем из жс пуляются крайне редко, так как это и выглядит и обслуживается кошмарно.