如何针对鼠标悬停事件中的元素 id 值进行测试？

Question

想知道是否有人可以帮助我了解如何在鼠标悬停事件中针对元素的 ID 值进行测试。我想我必须使用“这个”。

我得到的 ID 值是“未定义”

function mouseOver() {
  var e = $(this).attr("ID"); //need help with this bit
  if (e == ("row2012")) {
    alert(e)
  } else {
    alert(e);
  }
}

<table>
    <tr data-ng-repeat="x in Interruptions">
      <td id=row{{x.year}} onmouseover="mouseOver()" onmouseout="mouseOut()">
          {{x.year}}
      </td>
      <td>{{x.totalEvents}}</td>
      <td>{{x.customers}}</td>
      <td>{{x.avgDuration}}</td>
</table>

Answer 1

您可以通过在onmouseover 和onmouseout 内部传递this 直接传递当前的dom 元素，例如：

<td id=row{{x.year}} onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">{{x.year}}</td>

然后在js代码中访问元素id：

function mouseOver(elem) {
  var e = elem.id;
  if (e == "row2012") {
    alert(e)
  } else {
    alert(e);
  }
}

Answer 2

使用ng-mouseenter 和ng-mouseleave，并将变量x 传递给两者：

<td id=row{{x.year}} ng-mouseenter ="mouseOver(x)" ng-mouseleave="mouseOut(x)">{{x.year}}</td>

然后在函数中，你可以简单地使用：

$scope.mouseOver = function(item) {
  var id = `row${item.year}`
  ...
}

Answer 3

使用ng-mouse* 指令

使用 AngularJS 框架，应该避免使用 onmouseover 属性。而是使用 ng-mouseover 指令。它与 AngularJS 框架集成，并在 AngularJS 执行上下文中评估表达式。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。

有关详细信息，请参阅

• AngularJS ng-mouseover Directive API Reference
• AngularJS 没有ng-mouseout 指令
• AngularJS ng-mouseenter Directive API Reference
• AngularJS ng-mouseleave Directive API Reference

---

ng-mouseover 和 ng-repeat 特殊变量

ng-repeat 指令使用指令设置的特殊变量创建子作用域。其中之一是$index。

<div ng-repeat="x in arr">
   <p ng-mouseover="mouseOver($index)>{{x.year}}</p>
</div>

$scope.mouseOver = function(idx) {
    var x = arr[idx];
    console.log(x.year);
};

有关详细信息，请参阅

• AngularJS ng-repeat Directive API Reference - Special variable

---

ng-mouseover 与 $event

像ngMouseover 和ngFocus 这样的指令在该表达式的范围内公开一个$event 对象。当 jQuery 存在时，该对象是 jQuery Event Object 的实例或类似的 jqLite 对象。

<div id="fred" ng-mouseover="mouseOver($event)">
   Ipsum lorem
</div>

$scope.mouseOver = function(ev) {
    console.log(ev.target.id);
};

有关详细信息，请参阅

• AngularJS Developer Guide - Expressions - $event

Answer 4

您只需要使用以下信息。

在你的 HTML 中通过函数 mouseOver(this) 传递 this

<td id="1" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">2019</td>

现在在函数中使用以下

function mouseOver(ele) {
  var eleId = $(ele).attr("Id"); //need help with this bit
  if (eleId == "yourid") {
    alert(eleId)
  } else {
    alert(eleId);
  }
}