Селектор Html возвращает коллекцию html, и я не знаю, как добраться до элемента, в котором мне нужно внести изменения - PullRequest
Новая
       40

Селектор Html возвращает коллекцию html, и я не знаю, как добраться до элемента, в котором мне нужно внести изменения

0 голосов
/ 13 июля 2020

У меня есть 2 div: 1 в левой половине страницы (A), один справа (B). При наведении курсора на определенный элемент правого раздела я хочу, чтобы что-то отображалось над левым.

Я сделал это, используя следующий подход: 

 <div className="A">
             <div className="hidden-div1">DIV 1</div>   
             <div className="hidden-div2">DIV 2</div>   
             <div className="hidden-div3">DIV 3</div>   
</div>
<div className="B"> 
            <div className="base-div1">
                  <h2 onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>Project 1</h2>
            </div>
</div>

mouseOver(e){
        const hiddenDiv1 = document.querySelector(".hidden-div1");
        hiddenDiv1.style.display = "block";    
} 

mouseOut(e){
        const hiddenDiv1 = document.querySelector(".hidden-div1");
        hiddenDiv1.style.display = "none";      
}

Проблема в том, что я у меня есть 3 разных скрытых div и 3 разных базовых div, я хотел сделать 2 универсальные функции mouseOver и mouseOut для всех из них. Я попробовал это следующим образом: 

mouseOver(e){
      let hiddenDivName = "hidden-div" + e.target.className.slice(-1);
      let hiddenDivSelector = document.getElementsByClassName(hiddenDivName);
      hiddenDivSelector.style.display = "block";
}

, но он возвращает «Невозможно установить свойство 'display' of undefined». Я попробовал вести консольный журнал hiddenDivSelector, и он показывает коллекцию HTML, и я не знаю, как получить свой элемент. Я пробовал читать об этом и посещать другие вопросы, но ничего не смог применить к своей ситуации

1 Ответ

1 голос
/ 13 июля 2020

Цель события возвращает ссылку на элемент DOM. Для элементов DOM мы можем использовать метод getAttribute и заменять все символы, отличные от di git, на ''; результат можно использовать для поиска в DOM и перебора возвращенного массива; 

mouseOver(e){
      let hiddenDivName = "hidden-div" + e.target.getAttribute('class').replace(/\D/g, '');
      let hiddenDivSelector = document.getElementsByClassName(hiddenDivName);
      Array.from( hiddenDivSelector ).forEach(el => el.style.display ) = "block";
}
...