Can't get id of hovered svg element using jquery

Question

I want to get the id of the svg-element (text) which has been hovered. The HTML:

This is the javascript code:

$('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);
});

When I hover for example the first text element it should write 'textN' to the console.

user_1371995 · Answer

Use event.target.id, here is an example:

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

user_7867822 · Answer

You are using an arrow function that changes scope inside it. If you use function keyword, you can get the values normally:

$('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;
}

user_12172540 · Answer

you can use this snippet with hover over and over out hope that help you

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

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

Can't get id of hovered svg element using jquery

3 Answers