Javascript 重构和干燥jQuery代码

我要做的是向所有元素添加一个类，这些元素的类名与我悬停的id相同。例如，当我将某个id为元音的列表项悬停时，将对名为元音的类的所有span元素进行操作（添加一个类）

我可以毫无问题地做到这一点。但是我想对许多其他id名和相应的类名做同样的事情。例如：辅音、半元音、喉音、腭音等

我可以用不同的函数完成所有这些，但我想做的是调用一个函数，该函数将执行相同的任务，但足够聪明，可以找到id的名称，并由此生成类名

如何将id名称提取到变量中并将其分配给类名。

您可以这样做：

$("[id]").hover(function() {
  $("." + this.id).addClass("highlight");
}, function() {
  $("." + this.id).removeClass("highlight");
});

但我不一定推荐它。我更倾向于静态地定义它：

var ids = ["vowels", "consonants"];
for (var i = 0; i < ids.length; i++) {
  $("#" + ids[i]).hover(function() {
    $("." + this.id).addClass("highlight");
  }, function() {
    $("." + this.id).removeClass("highlight");
  });
}

varids=[“元音”、“辅音”]；
对于（变量i=0；i

或者类似的事情。

您可以这样做：

$("[id]").hover(function() {
  $("." + this.id).addClass("highlight");
}, function() {
  $("." + this.id).removeClass("highlight");
});

但我不一定推荐它。我更倾向于静态地定义它：

var ids = ["vowels", "consonants"];
for (var i = 0; i < ids.length; i++) {
  $("#" + ids[i]).hover(function() {
    $("." + this.id).addClass("highlight");
  }, function() {
    $("." + this.id).removeClass("highlight");
  });
}

varids=[“元音”、“辅音”]；
对于（变量i=0；i

---

或者类似的东西。

您可以使用一个插件：

$.fn.highlight = function() {
    return this.each(function() {
        $(this).hover(function() {
            var id = $(this).attr('id');
            $('.'+id).addClass('myclass');
        });
    });
}

你可以这样称呼它：

$(document).ready(function() {
    $('span').highlight();
});

---

您可以使用一个插件：

$.fn.highlight = function() {
    return this.each(function() {
        $(this).hover(function() {
            var id = $(this).attr('id');
            $('.'+id).addClass('myclass');
        });
    });
}

你可以这样称呼它：

$(document).ready(function() {
    $('span').highlight();
});

---

我觉得，使用CSS或者只向封装这些子元素的元素添加一个类，同样的效果可以大大简化。请张贴您的HTML代码和结构，以便我可以详细说明。感谢您查看它，但克莱特斯解决了它。我认为HTML/CSS本身不可能做到这一点，我有一种感觉，使用CSS或者只向封装这些子元素的元素添加一个类，同样的效果可以大大简化。请张贴您的HTML代码和结构，以便我可以详细说明。感谢您查看它，但克莱特斯解决了它。我认为HTML/CSS本身不可能做到这一点。我几乎可以工作，但“.”+ids[I]位没有任何作用。在代码的第3行，我一直在测试这段代码，它可以工作：$（this.css（{'cursor'：'default'}）；但出于某种原因，在同一行上，以下内容不起作用：$（“#”+ids[i]）.css（{'cursor'：'default'}）；我希望这将给你一个如何进一步帮助我的线索。第二个解决方案的第三行谢谢你的帮助克莱特斯。在第二个解决方案的第4行和第6行，我用$（this）.attr（'id'）替换id[I]使其工作。我几乎可以工作，但“+”id[I]位没有任何作用。在代码的第3行，我一直在测试这段代码，它可以工作：$（this.css（{'cursor'：'default'}）；但出于某种原因，在同一行上，以下内容不起作用：$（“#”+ids[i]）.css（{'cursor'：'default'}）；我希望这将给你一个如何进一步帮助我的线索。第二个解决方案的第三行谢谢你的帮助克莱特斯。在第二个解决方案的第4行和第6行，我将id[I]替换为$（this）.attr（'id'）。谢谢Steerpike。我用了你的一些溶液和cletus的一些溶液使它起作用。干杯，谢谢你，史提派克。我用了你的一些溶液和cletus的一些溶液使它起作用。干杯