Html 选择器 returns 一个 html 集合，我不知道如何找到我需要更改的元素

Question

我有 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 个不同的 hidden-div 和 3 个不同的 base-div，我想为它们制作 2 个通用的 mouseOver 和 mouseOut 函数。我试过的方法是这样的：

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

但它 returns“无法设置未定义的属性 'display'”。我尝试了控制台日志记录 hiddenDivSelector，它显示了一个 HTML 集合，但我不知道如何获取我的元素。我已经尝试阅读它并访问其他问题，但我无法对我的情况应用任何东西

Answer 1

事件目标 returns 对 DOM 元素的引用。在 DOM 元素上，我们可以使用 getAttribute 方法并将所有非数字字符替换为 ''；结果可用于搜索 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";
}

Html 选择器 returns 一个 html 集合，我不知道如何找到我需要更改的元素

Html selector returns an html collection and I don't know how to get to the element I need to make changes on

html

javascript

events

selector

reactjs