主页 / 问题 / 945551
Accepted
Чайник
Asked:2020-02-16 21:47:36 +0000 UTC2020-02-16 21:47:36 +0000 UTC

为什么我没有在 JS 循环中获取所有属性 [关闭]

  • 772

我使用 forEach 或 FOR 循环遍历元素集合，由于某种原因，它仅显示第一个元素的属性值，其余为 null，尽管元素本身正常显示

var sliders = document.querySelectorAll('.slide');
var count = 0;
console.log(count);
document.querySelector('.next').onclick = function() {
  count++;
  sliders.forEach(function(i) {
    console.log(i.getAttribute('num'));
  });
};
<div class="next">Click me</div>
<div class="slide" num="0"></div>
<div class="slide" num="1"></div>
<div class="slide" num="2"></div>

javascript

2 个回答

  1. 在这里它被纠正了，但你为什么需要 cout？

    var sliders = document.querySelectorAll('.slide');
var count = 0;

function fn_count() {
  count++;
  sliders.forEach(function(i) {
    console.log(i.getAttribute('num'));
  });
};
    .next {
  cursor: pointer;
  text-align: center;
  border: 1px solid black;
  padding: 1em;
}
    <div class="next" onclick="fn_count()">click</div>
<div class="slide" num="0"></div>
<div class="slide" num="1"></div>
<div class="slide" num="2"></div>

    • 0
  2. Best Answer

    这是一个很好的例子，请阅读评论

    var gnext = document.getElementById('nextPicture');
var gprev = document.getElementById("prevPicture");
var elem = document.getElementsByTagName('li');

// первому элементу сразу задаем класс, чтобы он был виден
elem[0].classList.add('visible');

let count = 0;

function _count(direction) { // direction - это аргумент который определяет 
  // направления 
  // если нажимается кнопка следующий next 
  if (direction === '_next') {
    // и count равен длине массива elem-li (- 1)
    if (count == elem.length - 1)
      // count обнуляем
      count = 0;
    else
      // если count не равен длине массива elem-li (- 1)
      count++;

    // а тут проверяем обратное действие
  } else if (direction === '_prev') {
    if (count == 0)
      count = elem.length - 1;
    else
      count--;
  }

  // А вот тут уже цикл
  for (let i = 0; i < elem.length; i++) {
    // Чтобы у всех elem удалить класс visible
    elem[i].classList.remove('visible');
  }
  // А тут добавляем класс visible elem с нужным индексом 
  elem[count].classList.add('visible');
}

// ну а тут запускаем _count(direction) 
gnext.addEventListener('click', function() {
  // задавая направления  
  _count('_next');
})

gprev.addEventListener('click', function() {
  _count('_prev');
})
    ul {
  position: relative;
}

li {
  opacity: 0;
  position: absolute;
}

.visible {
  opacity: 1;
}
    <div class="slider">
  <button id="prevPicture">Prev</button>
  <button id="nextPicture"> Next</button>
  <ul>
    <li><img src="http://via.placeholder.com/250x250/33ff99/555555?text=Slid1"></li>
    <li><img src="http://via.placeholder.com/250x250/33ff99/555555?text=Slid2"></li>
    <li><img src="http://via.placeholder.com/250x250/33ff99/555555?text=Slid3"></li>
    <li><img src="http://via.placeholder.com/250x250/33ff99/555555?text=Slid4"></li>
    <li><img src="http://via.placeholder.com/250x250/33ff99/555555?text=Slid5"></li>
    <li><img src="http://via.placeholder.com/250x250/33ff99/555555?text=Slid6"></li>
  </ul>
</div>

    • 0

相关问题