0

Всем привет. У меня есть такой контейнер:

<div class="pets_cards">

    </div>

Он содержит восемь таких карточек:

<div class="card card_1">
        <div class="image">
          <img src="../../assets/images/pets-katrine.png" alt="pets-katrine">
        </div>
        <p class="card_title">Katrine</p>
        <button class="card_button">Learn more</button>
      </div>

На основе этих восьми карточек, я создаю массив, увеличиваю его до 48, перемешиваю и хочу добавить обратно в контейнер:

let container = document.querySelector('.pets_cards')
let cards = Array.from(container.querySelectorAll('.card'))
cards.sort(() => Math.random() - 0.5)
let allCards = []
for (let i = 0; i < 6; i++) {
  for (let card of cards.slice(i,).concat(cards.slice(0, i))){
    allCards.push(card);
  }
}
container.innerHTML = '';
allCards.forEach((card) => container.appendChild(card))

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

1

1 ответ 1

0

Вы создаете массив, из объектов, объект ссылочный тип, это значит что у вас по 6 копий ссылок на один и тот же объект. Когда вы вставляете элемент на странице, а потом снова его куда-то вставляете, то он не дублируется, а переносится в последнее указанное место, поэтому у Вас их столько сколько было изначально.

Можно использовать клонирование, но у вас там кнопка и я подозреваю что на ней есть событие. Поэтому тут несколько вариантов. Возможно вам подойдет делегирование, а возможно нет, тогда на клонированные элементы нужно повторно добавить события.

const one = document.getElementById('one')
one.addEventListener('click', ({target})=>{
  console.log(target.textContent)  
})

const two = one.cloneNode(true)
two.textContent = "Вторая кнопка" // будет без события
document.body.appendChild(two)
<button id="one">Первая кнопка</button>

Вместо container.innerHTML = '', можно использовать container.replaceChildren() — делает то же самое.

Вместо такой конструкции можно воспользоваться методами массива:

for (let i = 0; i < 6; i++) {
  for (let card of cards.slice(i,).concat(cards.slice(0, i))){
    allCards.push(card);
  }
}

С учетом всего вышесказанного можно написать такой код:

// то что не меняете пишите как const
const container = document.querySelector('.pets_cards')
const cards = Array.from(container.querySelectorAll('.card'))

// добавляем обработчик через onclick проще не нужно думать
// об удалении обработчика если эта процедура будет вызвана 
// несеолько раз    

cards.forEach((card) => card.onclick= () => { 
  console.clear()
  console.log(card.querySelector('img').alt)
})

cards.sort(() => Math.random() - 0.5)

const arr = Array.from(new Array(48)) // выставляем нужное количество
// не используемые переменные можно иногда именовать _
const allCards = arr.reduce((acc,_ , i) =>{
  // берем кноку через % таким образом циклически перебираем 
  const cardOrig = cards[i % cards.length] 
  const newCard = cardOrig.cloneNode(true)
  newCard.querySelector('.card_button').onclick = cardOrig.onclick
  return [...acc, newCard]
}, []) 

container.replaceChildren(...allCards); // вставляем результат
.pets_cards{
  display:flex;
  flex-wrap: wrap;
  font-size: 0.7em;
}

.card {
  border: 2px solid gray;
  width: 60px;
} 
<div class="pets_cards">
  <div class="card card_1"> <!-- Вместо класса card_1 лучше id -->
     <div class="image">
        <img src="../../assets/images/pets-katrine.png" alt="pets-katrine1">
     </div>
     <p class="card_title">Katrine</p>
     <button class="card_button">Learn more</button>
  </div>
  <div class="card card_2"> 
     <div class="image">
        <img src="../../assets/images/pets-katrine.png" alt="pets-katrine2">
     </div>
     <p class="card_title">Katrine</p>
     <button class="card_button">Learn more</button>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.