Почему мой querySelectorAll не работает, даже если я преобразовал его в массив? - PullRequest
Новая
       9

Почему мой querySelectorAll не работает, даже если я преобразовал его в массив?

0 голосов
/ 05 февраля 2020

querySelectorAll не работает

Эй, ребята, я пытался вставить некоторые данные из моего JavaScript файла в мой индекс html с помощью манипуляции DOM (querySelectorAll), но он не работает.

Обратите внимание, что я также пытался преобразовать нодлист в массив, чтобы он отображался на html, но безрезультатно, он все равно не работает. Я потратил некоторое время на поиски аналогичной проблемы, но не смог ее найти. 

const card = document.querySelectorAll('.card-row')
const newCard = Array.from(card)


const data = [{
    topic: 'Food',
    title: 'Wake Up and Smell the Coffee',
    price: '$0.90',
    color: green
  },
  {
    topic: 'Architecture',
    title: 'The Brand New NASA Office',
    price: '$0.19',
    color: black
  },
  {
    topic: 'Travel',
    title: 'Experience the Saharan Sands',
    price: '$2.29',
    color: brown
  },
  {
    topic: 'Interior',
    title: '9 Air-Cleaning Plants Your Home Needs',
    price: '$0.09',
    color: greenblue
  },
  {
    topic: 'Food',
    title: 'One Month Sugar Detox',
    price: '$0.99',
    color: pink
  },
  {
    topic: 'Photography',
    title: 'Shooting Minimal Instagram Photos',
    price: '$0.29',
    color: blue
  }
]
data.forEach(info => {
  card.innerHTML += `
      <span>${info.topic}</span>
      <h3>${info.title}</h3>
      <p>${info.price}</p>
    `
})
.card-row {
  width: 300px;
  height: 270px;
  border-radius: 15px;
  background-color: tomato;
  color: #fff;
}
<section class="section">
  <div class="container">
    <div style='margin: 40px 10px 40px'>
      <h1>Lifestyle.</h1>
      <p>The latest and best lifestyle articles selected<br/> by our editorial office.
      </p>
    </div>
  </div>
  <div class="container">
    <div class='card-row'></div>
    <div class='card-row'></div>
    <div class='card-row'></div>
    <div class='card-row'></div>
    <div class='card-row'></div>
    <div class='card-row'></div>
  </div>
</section>

По сути, я хочу, чтобы моя переменная данных равнялась l oop и вставляла объекты внутри моих карт. Я попытался использовать только querySelector и, конечно, он работает для первой карты, но это не то, чего я хочу достичь.

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

Надеюсь, мое объяснение достаточно ясное. Заранее спасибо!

Ответы [ 2 ]

2 голосов
/ 05 февраля 2020

Если у вас столько же элементов .card-row, сколько у вас есть записей в data, вы можете просто передать индекс в качестве второго параметра в forEach и использовать его для выбора правильного .card-row element 

data.forEach((info, i) => {
  card[i].innerHTML += `
      <span>${info.topic}</span>
      <h3>${info.title}</h3>
      <p>${info.price}</p>
    `
})

Также есть две другие проблемы:

  1. В данных вашего примера вы пропускаете ' в значениях цвета, чтобы их можно было рассматривать как строки (Это может быть что-то, что вы забыли включить)
  2. Вы определили newCard, но затем используйте card для вашего forEach 

const card = document.querySelectorAll('.card-row')
const newCard = Array.from(card)

const data = [{
    topic: 'Food',
    title: 'Wake Up and Smell the Coffee',
    price: '$0.90',
    color: 'green'
  },
  {
    topic: 'Architecture',
    title: 'The Brand New NASA Office',
    price: '$0.19',
    color: 'black'
  },
  {
    topic: 'Travel',
    title: 'Experience the Saharan Sands',
    price: '$2.29',
    color: 'brown'
  },
  {
    topic: 'Interior',
    title: '9 Air-Cleaning Plants Your Home Needs',
    price: '$0.09',
    color: 'greenblue'
  },
  {
    topic: 'Food',
    title: 'One Month Sugar Detox',
    price: '$0.99',
    color: 'pink'
  },
  {
    topic: 'Photography',
    title: 'Shooting Minimal Instagram Photos',
    price: '$0.29',
    color: 'blue'
  }
];

data.forEach((info, i) => {
  card[i].innerHTML += `
      <span>${info.topic}</span>
      <h3>${info.title}</h3>
      <p>${info.price}</p>
    `
})
.card-row {
  width: 300px;
  height: 270px;
  border-radius: 15px;
  background-color: tomato;
  color: #fff;
}
<div class="container">
  <div style='margin: 40px 10px 40px'>
    <h1>Lifestyle.</h1>
    <p>The latest and best lifestyle articles selected<br/> by our editorial office.
    </p>
  </div>
</div>
<div class="container">
  <div class='card-row'></div>
  <div class='card-row'></div>
  <div class='card-row'></div>
  <div class='card-row'></div>
  <div class='card-row'></div>
  <div class='card-row'></div>
</div>
0 голосов
/ 05 февраля 2020

Посмотрите, что ваши данные итеративны (что может быть отображено с помощью l oop), и массив вашей карты также является итеративным, потому что вы выбрали его с помощью querySelectorAll. возвращает список повторяемых узлов. Таким образом, вы не можете использовать card.inner Html напрямую. Посмотрите, есть предложение для этого. Не делайте пустой элемент .card-row в Html. Скорее генерируйте html в javascript при выполнении итерации по массиву данных. Вы можете создать html в Javascript с помощью. .createElement (). Я думаю, что это очень гибко, и теперь у вас больше контроля в вашем коде. Код должен выглядеть примерно так: 

data.forEach((info) => {
   card = document.createElement('div').classList().add('card-row').innerHTML = `
  <span>${info.topic}</span>
  <h3>${info.title}</h3>
  <p>${info.price}</p>
`; document.querySeletor('.container').append(card);});

Я думаю, это намного понятнее. (вам не нужно выбирать карту вверху)

...