Question

我有一个三按钮导航面板，包含三个div和一个锚点。鼠标悬停时，myFunction（）会为三个div和anchor标记指定一个类，以便进行样式设置。

<nav>
    <div id="btn1" class="button" onMouseOver="myFunction();">
    <div id="btn_bdr1">
    <div id="btn_bdr2">
        <a href="#"></a>
    </div>
    </div>
    </div>

    <div id="btn3" class="button" onMouseOver="myFunction();">
    <div id="btn_bdr1">
    <div id="btn_bdr2">
        <a href="#"></a>
    </div>
    </div>
   </div>

    <div id="btn2" class="button"  onMouseOver="myFunction();">
    <div id="btn_bdr1">
    <div id="btn_bdr2">
        <a href="#"></a>
    </div>
    </div>
    </div>
</nav>

我需要做的是找到调用myFunction（）的div的ID，这样我就可以在函数内只对调用div进行更改，而不是全部三个。

仅使用JavaScript，我该怎么做呢。

提前致谢。

Answer 1

有两种方法可以做到

1）使用div的名称

向方法发送参数

示例

<div id="btn1" class="button" onMouseOver="myFunction('btn1')">

2）发送元素

示例

<div id="btn1" class="button" onMouseOver="myFunction(this)">

然后在javascript中你可以做

myFunction(element) { //element is now the element you clicked on }

Answer 2

您可以使用event对象查看目标（e.target）。这是对元素本身的引用，因此要获取ID，您只需访问元素的id属性。（e.target.id）

document.querySelectorAll('.a').forEach(function(ele, ind) {
  ele.addEventListener("mouseover", function(e) {
    console.log(e.target, e.target.id);
  })
});

.a {
  height: 40px;
  width: 40px;
  border: solid black 3px;
  margin-top: 5px;
}

<div class="a" id="one"></div>
<div class="a" id="two"></div>
<div class="a" id="three"></div>

Answer 3

您可以从parseInt致电this.event.target以确定生成该事件的元素。

例如：

myFunction()

查找调用JavaScript函数的HTML元素的ID

3 个答案: