Как проверить значение идентификатора элемента при наведении мыши на событие?

Question

Хотите знать, если кто-нибудь может помочь мне понять, как проверить значение идентификатора элемента, при наведении мыши на событие. Я предполагаю, что должен использовать «это».

значение, которое я получаю для идентификатора, "неопределено"

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

Вы можете передать текущий элемент dom напрямую, передав this внутри onmouseover & onmouseout функции вроде:

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

и затем получить доступ к элементу id в js коде, например :

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 привязки данных, обработки исключений, отслеживания свойств и т. Д. c.

Для получения дополнительной информации см.

• AngularJS Справочник по API директивы по наведению указателя мыши
• AngularJS не имеет директивы ng-mouseout
• AngularJS Справочник API Директивы ng-mouseenter
• AngularJS Справочник API Директивы ng-mouseleave

---

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 Ссылка на директиву API повторения ng-repeat - Специальная переменная

---

ng-mouseover с $event

Директивы типа ngMouseover и ngFocus предоставляют объект $event в рамках этого выражение. Объект является экземпляром jQuery объекта события при наличии jQuery или аналогичного объекта jqLite.

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

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

Для получения дополнительной информации см.

• AngularJS Руководство разработчика - выражения - $ event

Answer 4

Вам просто нужно использовать следующую информацию.

В вашем HTML передать это в функцию mouseOver (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);
  }
}