Не могу получить идентификатор элемента hovered svg, используя jquery

Question

Я хочу получить идентификатор svg-элемента (text), который был найден. The HTML:

<svg class="compass-svg" width="200" height="200">
     <text id="textN" x="93" y="55" fill="#000">N</text>
     <text id="textE" x="145" y="105" fill="#000">O</text>
     <text id="textS" x="95" y="158" fill="#000">S</text>
     <text id="textW" x="40" y="105" fill="#000">W</text>
</svg>

Это код javascript:

$('text').hover(() => {
    //this is not working
    console.log($(this).attr('id'));

    //this is also not working
    console.log(this.attr('id'));

    //I've also tried this
    console.log(this.id);
});

Когда я наведите курсор мыши, например, на первый текстовый элемент, он должен записать 'textN' в консоль.

Answer 1

Вы используете функцию стрелки, которая изменяет область видимости внутри нее. Если вы используете ключевое слово function, вы можете получить значения обычно:

$('text').hover(function() {
    // This will work
    console.log($(this).attr('id'));

    // This will also work
    console.log(this.id);
});

.as-console-wrapper {
  max-height: 85px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg class="compass-svg" width="200" height="200">
     <text id="textN" x="93" y="55" fill="#000">N</text>
     <text id="textE" x="145" y="105" fill="#000">O</text>
     <text id="textS" x="95" y="158" fill="#000">S</text>
     <text id="textW" x="40" y="105" fill="#000">W</text>
</svg>

Answer 2

вы можете использовать этот фрагмент с наведением указателя мыши, который поможет вам

$('text').hover(function () {
    // hover over
    console.log($(this).attr('id'));

  }, function () {
    // hover out
    console.log($(this).attr('id'));
  }
);

Answer 3

Используйте event.target.id, вот пример:

$('text').hover((e) => {
  //this is working
  console.log(e.target.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg class="compass-svg" width="200" height="200">
     <text id="textN" x="93" y="55" fill="#000">N</text>
     <text id="textE" x="145" y="105" fill="#000">O</text>
     <text id="textS" x="95" y="158" fill="#000">S</text>
     <text id="textW" x="40" y="105" fill="#000">W</text>
</svg>