如何在多个图像上使用 jQuery 函数答案

【问题标题】：How to use a jQuery function on mutliple images如何在多个图像上使用 jQuery 函数
【发布时间】：2012-03-01 13:34:12
【问题描述】：

我有一个图像集合，所有图像都属于“imgGroup”类。对于每个图像，都有一个包含两个按钮的 div。这些 div 被分配了一个名为“btnActions”的类。我的图像是从数据库中显示的。

如果我有未知数量的图片，我如何在每张图片上使用下面的 jQuery 代码？目前，当我将鼠标悬停在图像上时，会显示所有图像的“btnActions”div（如预期的那样 - 但不是预期的）。

P.S - 这个 jQuery.each 函数似乎是一个解决方案，但我的大脑并没有很好地解决它。

谢谢

$('.imgGrp').hover(function() {  
    $('.btnActions').css("display", "block");  
});

【问题讨论】：

如何将每张图片链接到其 div？
请发布您的 html，结果将取决于此。
如果这些答案之一对您有所帮助，您为什么不接受它？

标签： jquery each

【解决方案1】：

$('.imgGrp').hover(function() {  
    $('.btnActions', $(this)).css("display", "block");  
});

仅适用于您悬停的“.btnActions”。

【讨论】：

感谢 Johannes，但这似乎不起作用。我知道你在这方面的发展方向，并将深入研究这种方法。
重要的是使用“上下文”的想法。如果您向我展示您的确切 html 代码，我可以帮助您使用 js 功能。

【解决方案2】：

您实际上并不需要 JavaScript。

.imgGrp:hover .btnActions {
  display: block;
}

【讨论】：

谢谢瑞恩，但我只是想显示/显示我悬停在上面的图像的 btnActions DIV...不是全部
然后将悬停应用到附加到特定图像的类，而不是组，因为当您将鼠标悬停在组上时，您不希望发生任何事情。

【解决方案3】：

当您浏览具有“imgGroup”类的项目时，此 jQuery 脚本将显示具有“btnActions”类的项目。移动鼠标后，“btnActions”类的项目将隐藏。 window.load 部分将等到所有图像都加载完毕后再应用效果。

$(window).load(function() {

    $(".imgGroup").hover(
      function () {
        $(this).find("button").show();
      }, 
      function () {
        $(this).find("button").show();
      }
    );

});

瞧，祝你好运，让我知道进展如何！

PS：您也可以通过将常规 .show() 和 .hide() 替换为 .show('slow') 和 .hide('fast') 来使其淡入。

更新：

这是另一种可能有效的方法：

$(window).load(function() {

    $(".imgGroup").hover(
      function () {
        $(this).addClass("hover");
        $(".hover > .btnActions").show();
      }, 
      function () {
        $(this).removeClass("hover");
        $(".hover > .btnActions").hide();
      }
    );

});

让我知道它们是否有效。

【讨论】：

谢谢卡尔，但这也是同样的事情。它一次显示所有图像的 btnActions DIV。我只是想显示/显示我悬停的图像的 btnActions DIV。
我现在明白了。我更改了 jQuery 以在您悬停的项目中搜索按钮标签以代替显示。如果您使用的是“输入”，也可以将“按钮”更改为另一个标签。试试看。
如果您回头看我的回答，我还添加了一种可能也可以使用的替代方法。
赢家鸡肉晚餐！ $(this).find。非常感谢您的帮助！
很高兴它有效！确保单击我的答案旁边的复选标记！让我知道是否可以提供其他帮助！

【解决方案4】：

试试这个 Mickormick。

$(window).load(function() {

    $(".imgGroup").hover(
      function () {
        $(this).addClass("hover");
        $(".hover > .btnActions").show();
      }, 
      function () {
        $(this).removeClass("hover");
        $(".hover > .btnActions").hide();
      }
    );

});

【讨论】：

你应该合并你的两个答案。