1

Не могу понять в чем проблема. при выводе в консоли console.log(box) - вроде норм, отображает весь список. как задаю ему console.log(box[number]) - undefined;

window.onload = function(){
    var box = document.querySelectorAll('.box');
    var boxRight = document.querySelectorAll('.box-right');
    var bar = document.querySelectorAll('.bar');
    for (var i = 0; i < box.length; i++) {
        box[i].onmouseover = function (){
           showGrey(i);
        }
        box[i].onmouseout = function (){
            hiddenGrey(i);
        }
        bar[i].onclick = function(){
            alert('Удаленно');
        }
    }
    function showGrey(number){
        console.log(box);
            boxRight[number].classList.add('cl-box2');
            bar[number].classList.add('cl-bar2');
    }
    function hiddenGrey(number){
            boxRight[number].classList.remove('cl-box2');
            bar[number].classList.remove('cl-bar2');
    }    
}
.box-left {
  position: absolute;
  height: 100px;
  width: 80px;
  background-color: #e74c3c;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50px;
  margin: auto;
  cursor: pointer;
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
}

.fa-times {
  font-size: 70px !important;
  margin: 23px;
  color: #fff;
}

.box-right {
  position: absolute;
  height: 100px;
  width: 20px;
  background-color: #e74c3c;
  top: 0;
  bottom: 0;
  left: 50px;
  right: 0;
  margin: auto;
  transition: 0.5s;
  cursor: pointer;
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
}

.fa-check {
  font-size: 70px !important;
  margin-left: 7px;
  margin-top: 13px;
}

.bar {
  height: 80px;
  width: 0px;
  background-color: lightgray;
  position: absolute;
  top: 10px;
  bottom: 0;
  left: 80px;
  right: 0;
  transition: 0.5s;
  overflow: hidden;
}

.cl-bar2 {
  width: 80px;
}

.cl-box2 {
  left: 210px;
}
      <div type='button' name='delete' class='box' >
        <div class='box-left'>
          <i class='but-icon fa fa-lg fa-times'></i>

          <div class='bar'>
            <i class='but-icon fa fa-lg fa-check'></i>
          </div>
        </div>
        <div class='box-right'></div>
      		</div> 

1 ответ 1

1

Вы передаете в обработчик функцию без параметров, которая во время выполнения вызывает другую функцию, которая в качестве параметра получает значение переменной i. Так как переменная i одна, обработчики событий всех элементов будут обращаться только к одной единственной переменной, значение которой определяется и меняется в процессе выполнения цикла. В данном случае, так как в цикле срабатывает операция инкремента (увеличение на единицу) в конце ей присваивается значение 1, поэтому все обработчики будут обращаться к этой единственной переменной со значением 1, а элемента boxRight[1] не существует, поэтому возникает ошибка.

Есть два варианта решения этой проблемы.

1) Использовать встроенный метод функций bind, который жестко устанавливает this (в данном случае не нужен) и аргументы.

box[i].onmouseover = showGrey.bind(null, i)
box[i].onmouseout = hiddenGrey.bind(null, i);

2) Использовать современные возможности JavaScript: в цикле переменную i вместо var объявляйте с помощью директивы let. Однако старые браузеры не поддерживают ES6. В такие случаях используют Babel, который переписывает код на предыдущий стандарт ES5.

for (let i = 0; i < box.length; i++) {
  // код...
}

var box = document.querySelectorAll('.box');
    var boxRight = document.querySelectorAll('.box-right');
    var bar = document.querySelectorAll('.bar');
    for (let i = 0; i < box.length; i++) {
        box[i].onmouseover = function (){
           showGrey(i);
        }
        box[i].onmouseout = function (){
            hiddenGrey(i);
        }
        bar[i].onclick = function(){
            alert('Удаленно');
        }
    }
    function showGrey(number){
            boxRight[number].classList.add('cl-box2');
            bar[number].classList.add('cl-bar2');
    }
    function hiddenGrey(number){
            boxRight[number].classList.remove('cl-box2');
            bar[number].classList.remove('cl-bar2');
    }    
.box-left {
  position: absolute;
  height: 100px;
  width: 80px;
  background-color: #e74c3c;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50px;
  margin: auto;
  cursor: pointer;
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
}

.fa-times {
  font-size: 70px !important;
  margin: 23px;
  color: #fff;
}

.box-right {
  position: absolute;
  height: 100px;
  width: 20px;
  background-color: #e74c3c;
  top: 0;
  bottom: 0;
  left: 50px;
  right: 0;
  margin: auto;
  transition: 0.5s;
  cursor: pointer;
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
}

.fa-check {
  font-size: 70px !important;
  margin-left: 7px;
  margin-top: 13px;
}

.bar {
  height: 80px;
  width: 0px;
  background-color: lightgray;
  position: absolute;
  top: 10px;
  bottom: 0;
  left: 80px;
  right: 0;
  transition: 0.5s;
  overflow: hidden;
}

.cl-bar2 {
  width: 80px;
}

.cl-box2 {
  left: 210px;
}
<div type='button' name='delete' class='box' >
        <div class='box-left'>
          <i class='but-icon fa fa-lg fa-times'></i>

          <div class='bar'>
            <i class='but-icon fa fa-lg fa-check'></i>
          </div>
        </div>
        <div class='box-right'></div>
      		</div> 

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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