Javascript 获取悬停方法中动态选择的id的后缀

我有以下JQuery选择器，附带了一个hover方法：

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

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

但是，我想在id上带有“foo”前缀的链接下面修改一个td装饰，该前缀为“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的变体，但得到了未定义的值

---

谢谢你的帮助

使用

this.id

，而不是

$（this.id

）。从技术上讲，

$（this）.attr（“id”）

也可以工作，但这不是一个好主意，因为它要通过jQuery间接寻址的几个级别来实现相同的结果

---

说明：

此

是本机DOM元素，具有所有常用属性和方法（例如

id

、

className

、和

addEventListener

）

$（this）

是从该DOM元素创建的jQuery对象，它只有jQuery方法，没有任何原始属性。

使用

this.id

，而不是

$（this.id

）。从技术上讲，

$（this）.attr（“id”）

也可以工作，但这不是一个好主意，因为它要通过jQuery间接寻址的几个级别来实现相同的结果

说明：

此

是本机DOM元素，具有所有常用属性和方法（例如

id

、

className

、和

addEventListener

）

$（this）

是从该DOM元素创建的jQuery对象，它只有jQuery方法，没有任何原始属性