Question

我有一个SVG地图，当将鼠标悬停在地图的某个区域时，我想在其中更改侧面板上的文本。我想将文本更改为包含鼠标悬停区域的锚的类名。当前，每当我将鼠标悬停在地图上时，它都会在侧面板中返回undefined。

我尝试将代码设置为仅在类名不等于nil且函数没有触发的情况下才起作用，所以我一定不要在鼠标悬停时获得定位标记。

HTML（已删除的无关代码）

<p onmouseover="houseQuickOverview()">
    <svg ... >
        <g id="G_Areas" ... >
            <a class="HD-002" ... >
                <path gg:cat="2" d="M ... />
            </a>
            <a class="HD-003" ... >
                <path gg:cat="2" d="M ... />
            </a>

JavaScript

let houseQuickOverview = function () {
        let district = this.className;
        document.querySelector(".districtNumber").innerHTML = district;

}

当我将鼠标悬停在包含SVG的段落上时，当鼠标触摸锚点之一时，我希望它将锚点的类名返回给districtNumber div。当前，它仅向div返回undefined。

Answer 1

尝试以下操作，在特定情况下，您可能需要缩小els的范围

const anchor = document.querySelectorAll("p a"); // to select only <a> under <p>

(function() {
  const anchor = document.querySelectorAll("a")
  for (const a of anchor) {
    a.addEventListener('mouseover', function(event) {
      document.getElementById('result').innerHTML = event.currentTarget.className;
    })
  }
})();

#result {
  color: red;
}

a {
  display: block;
  margin: 1em;
}

<a class="HD-002">
                123
            </a>
<a class="HD-0022">
                456
            </a>
<a class="HD-0023">
                789
            </a>
<a class="HD-0024">
                101112
            </a>

<div id="result"></div>

如何在svg中使用javascript onmouseover函数获取类名？

1 个答案: