javascript - 在悬停方法中获取动态选择的 id 的后缀

Question

我有以下带有悬停方法的 JQuery 选择器:

$("a[id^='foo']").hover(
  function () {
    $(this).css("color", "#eeeeee");

  }, 
  function () {
    $(this).css("color", "#ffffff");
  }
);

但是，我想更改链接下方的 td 装饰，其 id 上带有“foo”前缀，其中 ID 带有“bar”前缀。澄清一下:foo1、foo2、foo3 和 bar1、bar2、bar3。如何找出当前有效的 id 并在同一悬停方法中使用其相应的后缀？

从技术上讲，我想用半伪代码实现这个结果

$("a[id^='foo']").hover(
  function () {
    $(this).css("color", "#eeeeee");
        // var x = charAt($(this).id.length-1)
        // $("#bar"+x).css("color", "#eeeeee");
  }, 
  function () {
    // ...
  }
);

我尝试了 $this.id 的变体，但得到了未定义的值。

感谢您的帮助!

Answer 1

使用this.id，而不是$(this).id。从技术上讲，$(this).attr("id") 也可以工作，但这不是一个好主意，因为它要通过多个级别的 jQuery 间接来实现相同的结果。

说明:this 是一个原生 DOM 元素，具有所有常用的属性和方法(例如 id、className 和 addEventListener 仅举几例)。 $(this) 是从该 DOM 元素创建的 jQuery 对象，它只有 jQuery 方法，没有任何原始属性。