Javascript 如何简化以下代码？

因此，我选择了一些图像，并希望在（'hover'）上显示一个div。我当前的代码非常庞大，手动为每个图像添加div

 $("#TheNook").hover(function() {
$("#TheNook-cover").toggleClass("hidden");
});

$("#TheNook-cover").hover(function() {
    $("#TheNook-cover").toggleClass("hidden");
});

$("#ManCave").hover(function() {
    $("#ManCave-cover").toggleClass("hidden");
});

$("#ManCave-cover").hover(function() {
    $("#ManCave-cover").toggleClass("hidden");
});

$("#AnchorsAweigh").hover(function() {
    $("#AnchorsAweigh-cover").toggleClass("hidden");
});

$("#AnchorsAweigh-cover").hover(function() {
    $("#AnchorsAweigh-cover").toggleClass("hidden");
});

$('#BatCave').hover(function() {
    $('#BatCave-cover').toggleClass('hidden');
});

$('#BatCave-cover').hover(function() {
    $('#BatCave-cover').toggleClass('hidden');
});

$('#CountryChic').hover(function() {
    $('#CountryChic-cover').toggleClass('hidden');
});

$('#CountryChic-cover').hover(function() {
    $('#CountryChic-cover').toggleClass('hidden');
});

$('#BohemianBungalow').hover(function() {
    $('#BohemianBungalow-cover').toggleClass('hidden');
});

 $('#BohemianBungalow-cover').hover(function() {
     $('#BohemianBungalow-cover').toggleClass('hidden');
 });

我尝试过的新解决方案要简洁得多，但我不完全确定如何让它工作。我不熟悉在JQuery中声明和使用变量，所以请提供帮助

var cover = $('.theme-img:hover').attr("alt");

$('.theme-img').hover(function() {
    $('#'+cover+'-cover').toggleClass('hidden');
});

下面是一个JSFIDLE：

---

第一个图像的行为应该与第二个图像类似。

假设它们都有“theme img”类，这可能会起作用

// "var cover = $('.theme-img:hover').attr("alt"); (not needed)

$('.theme-img').hover(function() {
    $(this).toggleClass('hidden');
});

---

您可以使用此代码来实现以下目标：

JQUERY：

$('img.theme-img').hover(function() {
  $(this).parent().children('div').toggleClass('hidden');
});

这是您的JSFIDLE和我的编辑：

使用jQuery元素数组和要切换隐藏的目标jQuery元素调用toggle hover。范例

toggleHover([$('#TheNook'), $('#TheNook-cover')], $('#TheNook-cover'));

---

只是一个想法，可能会清理一下代码

这个主题图像类是什么？这是所有div的类吗？这是您必须悬停在上面才能看到div的图像类。您是否可以在问题中包括

html

，创建stacksnippets进行演示？添加了一个编辑JSFIDLE的答案，希望对您有所帮助。唯一的问题是，必须切换的每个div都包含唯一的文本。您悬停在上面的图像有一个

主题img

类和唯一id，切换的div有一个唯一id，对应于与之关联的图像。谢谢。您将如何以相同的方式选择切换的div？为了修复在小提琴中添加的div上移动时出现的闪烁问题，必须在hover$（'img.theme img'.parent（）.children（'div'））.hover（function（）{$（this.toggleClass（'hidden'）；}）上切换其隐藏类；我试过这个，但似乎不起作用。“主题img”后面缺少的括号是打字错误吗？是的。我通过向元素添加一个额外的类，然后使用该类选择它来修复它。

toggleHover([$('#TheNook'), $('#TheNook-cover')], $('#TheNook-cover'));