Question

我正在为零售商建立一个网站。我正在他们的商店位置页面上工作，该页面有4个不同的街道位置。每个街道地址都包含在自己的段落标记中。所有四个段落都在div容器内，该容器具有名为“box_1”的ID。

我编写了一个事件处理程序，用于更改第一个段落元素的背景颜色。但是，如果我不需要，我不想为其他3个段落编写相同的冗余代码。

我希望JS首先确定哪个段落正在悬停并在数组中占据其位置并将其加载到事件处理程序的括号中。示例：将鼠标悬停在第2段上并将“1”加载到元素[1] .onmouseover = function（）{// my code};

以下是我目前的代码：

<div id="box_1">
<p>18901 Kansas Avenue, Jimmytown, NE </p>
<p>5015 Cornman Lane, Crybaby, MN </p>
<p>847 Halfstack Avenue, Crumble, GA </p>
 </div>

// javaScript:
var divPoint = document.getElementById("box_1"); // ID for the div
var mousePoint = divPoint.getElementsByTagName("p"); // p elements inside div

// mouseover event handler
mousePoint[0].onmouseover = function() {
mousePoint[0].style.backgroundColor = "#a80";
};

Answer 1

您可以使用css执行此操作，无需使用javascript。如果由于某种原因必须使用js，请将事件发送到div并使用事件目标来选择正确的p元素。

json

Answer 2

首先，将事件附加到div。在onmouseover函数中，您可以使用变量名event。然后，调用event.target以获取触发事件的元素。

您可能还希望实施onmouseout以清除背景。这是代码。

var divPoint = document.getElementById("box_1");

divPoint.onmouseover = function(event) {
    var element = event.target;

    if (element.tagName.toLowerCase() === 'p') {
        element.style.backgroundColor = "#a80";
    }
};

divPoint.onmouseout = function(event) {
    var element = event.target;

    if (element.tagName.toLowerCase() === 'p') {
        element.style.backgroundColor = "#fff";
    }
};

您可以在JsFiddle上进行测试。

有关event.target的详情，请参阅W3Schools。

用于确定将哪个p元素悬停以调用事件处理程序的javaScript

2 个答案: