Почему в цикле JS получаю не все атрибуты [закрыт]

150

08 октября 2019, 10:40

Прохожу по коллекции элементов циклом 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>

Answer 1

Вот наглядный пример, читай комментарии

var gnext = document.getElementById('nextPicture'); 
var gprev = document.getElementById("prevPicture"); 
var elem = document.getElementsByTagName('li'); 
 
// первому элементу сразу задаем класс, чтобы он был виден 
elem[0].classList.add('visible'); 
 
let count = null; 
 
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>

Answer 2

Вот подправлено, но 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>