时间戳

首页 > 解决方案 > Html 选择器返回一个 html 集合，但我不知道如何获取需要更改的元素

javascript - Html 选择器返回一个 html 集合，但我不知道如何获取需要更改的元素

问题描述

我有 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";
}

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

标签： javascripthtmlreactjseventsselector

解决方案

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

推荐阅读