Модальное окно и табы

100

18 ноября 2019, 02:20

for(let i=0;i<modalBtn.length;i++){        
    modalBtn[i].addEventListener('click', function(e){
        console.log(i);
        let target=e.target;
        if(target&&target.classList.contains('description-btn')){
          for(let i=0;i<modalBtn.length;i++){              
              if(target==modalBtn[i]){
                overlay.style.display="block";
                break;
              }
          }
        }
    });//переписать
}

Как данный код понимает, что я нажимаю на именно данный таб? Он должен выводить модальное окно при нажатии на кнопку в табе

Answer 1

У вас тут наблюдается некоторая избыточность

В объекте описывающем событие (e), вы считываете поле target

let target=e.target;

оно указывает на источник события - элемент на который Вы кликнули

а так же вы используете индекс элемента в массиве, можно было бы обойтись и без этого.

Я не исправлял Ваш код, просто немного дополнил его, избыточность предлагаю удалить Вам самим

let modalBtn = [...document.querySelectorAll('button')] 
for(let i=0;i<modalBtn.length;i++){         
    modalBtn[i].addEventListener('click', function(e){ 
        console.log(i); 
        let target=e.target; 
        if(target&&target.classList.contains('description-btn')){ 
          for(let i=0;i<modalBtn.length;i++){               
              if(target==modalBtn[i]){ 
              overlay.innerHTML = 'Нажата кнопка ' + i; 
                overlay.style.display="block"; 
                break; 
              } 
          } 
        } 
    });//переписать 
}

<button class='description-btn'>1</button> 
<button class='description-btn'>2</button> 
<button class='description-btn'>3</button> 
<button class='description-btn'>4</button> 
<div id='overlay' style='display:none; width:100%; height:100%; position: absolute; top:0;left:0; background-color:white'>1234</div>