Question

所以我选择了一些图像，并希望显示一个div on('hover')。我当前的代码非常笨重，并为每个图像手动添加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');
});

这是一个JSFiddle：https://jsfiddle.net/w6pbp4Lz/2/

第一张图片的行为与第二幅图像相同。

Answer 1

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

JQUERY：

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

以下是我的JSfiddle编辑：https://jsfiddle.net/w6pbp4Lz/6/

Answer 2

假设他们都有课程＆＃34; theme-img＆＃34;这可能有用

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

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

Answer 3

function toggleHover(srcElements, tarElement) {
  srcElements.forEach(function(srcElement) {
    srcElement.hover(function() {
      tarElement.toggleClass('hidden');
    });
  });
}

调用切换悬停，使用jQuery元素数组和目标jQuery元素来切换隐藏。示例

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

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

如何简化以下代码？

3 个答案: