如何使用ID在悬停一个框架元素时调用javascript函数？

Question

我一直在调用mouseenter的javascript函数，像这样。

document.querySelector('a-cylinder').addEventListener('mouseenter', function(evt) {
  alert("This is a cylinder.");
})

document.querySelector('a-box').addEventListener('mouseenter', function(evt) {
  alert("This is a box.");
})

document.querySelector('testBox').addEventListener('mouseenter', function(evt) {
  alert("This is a box, targeted with an ID");
})

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>

<a-scene>
  <a-camera camera look-controls="reverseMouseDrag: true" cursor="rayOrigin: mouse" raycaster="objects: .hoverable"></a-camera>
  <a-box class="hoverable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>
  <a-cylinder class="hoverable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

它对圆柱体和第一个框（HTML中最先出现的那个）都有效。但是，我不能指定我想悬停在哪个框上来调用函数，如果不使用 querySelector('a-box') 我用的是 querySelector('elementID').

Answer 1

首先，请记住。querySelector 将总是返回第一个匹配的元素所以 为了得到所有的盒子，你应该使用 querySelectorAll 而不是。还有 用于选择 id 你应该称呼它为 # 关键字.

有多种方法可以克服这种情况，如： 1. 在你的DOM中选择每个特定的元素，你可以简单地分配一个独特的 id 归属到每一个人，然后以下列方式称呼他们 document.getElementById. 所以让我们来看看它到底是如何工作的，例如，让我们假设你给一个独特的 id 到你的第二个框中，就像这样。

<a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>

要引用这样的元素，你可以用以下方法来实现 getElementById 或 querySelector 就像这样。

document.getElementById('#testBox').addEventListener('mouseenter', function(evt) {
  alert("This is a box, targeted with an ID");
})

// or

document.querySelector('#testBox').addEventListener('mouseenter', function(evt) {
  alert("This is a box, targeted with an ID");
})

注意： 你应该始终考虑使用 # 用于选择项目 id 和 . 用于选择项目 class.

但是，如果你有一个情况下，当元素是太多了，并 你想避免使用独特的 id 你可以通过以下方式来实现 querySelectorAll 然后迭代它们，并为每个元素添加一个事件。更多信息，你可以阅读 这个.

我只是修正你当前的代码，所以你的代码应该是这样的。

document.querySelector('a-cylinder').addEventListener('mouseenter', function(evt) {
  alert("This is a cylinder.");
})

document.querySelector('a-box').addEventListener('mouseenter', function(evt) {
  alert("This is a box.");
})

document.querySelector('#testBox').addEventListener('mouseenter', function(evt) {
  alert("This is a box, targeted with an ID");
})

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>

<a-scene>
  <a-camera camera look-controls="reverseMouseDrag: true" cursor="rayOrigin: mouse" raycaster="objects: .hoverable"></a-camera>
  <a-box class="hoverable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-box id="testBox" class="hoverable" position="0 0.8 -4" rotation="0 45 0" radius="1.25" color="#EF2D5E"></a-box>
  <a-cylinder class="hoverable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Answer 2

如果你想通过类来引用一个项目，使用queryElementsByClassName. 这可以返回多个项目。

https:/developer.mozilla.orgen-USdocsWebAPIDocumentgetElementsByClassName。

如果你想通过项目的ID来引用它，请使用getElementById。如果一个项目没有ID，那么你必须使用querySelector。

https:/developer.mozilla.orgen-USdocsWebAPIDocumentgetElementById。

querySelector可以查询标签、类或ID，如果您指定#代表ID，.代表类，比如.hoverable或#testbox。但是，它只能返回一个项目。

https:/developer.mozilla.orgen-USdocsWebAPIDocumentquerySelector。

如果你想要多于一个，使用querySelectorAll。