javascript - 如果一个 div 的高度与另一个 div 的高度相等，请执行某项操作 - 在循环中？

Question

我有多个 div，它们都循环输出相同的内容。所以基本上我的页面上有 6 个包含图像的 div，这些图像有一个悬停显示第二个图像。

除非 .first-image 和 .last-image 的高度相等，否则我希望最后一张图片是 display: none;

6 个不同的 div 中的每一个都包含所有不同高度的图像，因此我需要对每个图像进行单独“判断”。所以我猜是在循环中。

我把这个 Demo 放在一起了尝试展示我想要实现的目标，但我还没有完全理解我想要的。 - 当您将鼠标悬停在第二个和第三个 div 上时，悬停不应显示。

$('.product-img-loop').each(function () {
   var firstImg = $('.first-image').height();
   var lastImg = $('.last-image');

   if (firstImg == lastImg.height()) {
     $('.last-image').css('display', 'block');
   } else {
     $('.last-image').css('display', 'none');
   }
});

如有任何帮助，我们将不胜感激。

Answer 1

不可能隐藏 .hidden 框，因为它有一个 !important 覆盖它:

    .reveal .hidden {
        display: block !important;
        visibility: visible !important;
    }

红色框将永远显示，因为 !important 属性删除了所有以前的样式。 要解决它，只需删除重要属性并进行测试即可。

另一个问题是循环仅在加载页面时执行，当您悬停图像时不执行它。正因如此，成就十分艰辛。也许如果您尝试更好地解释，我们可以用最简单的方式转换您的代码。

编辑

正如我们在评论中讨论的那样，这里是一个工作示例:

http://jsfiddle.net/ak88Lh02/2/

    $('.image').on('mouseover', function() {
        var reveal = $(this).find('.reveal');
        var hide = $(this).find('.hide');

        if(reveal.height() == hide.height())  {
            hide.show()
        }
    }).on('mouseout', function() {
        var hide = $(this).find('.hide');
        hide.hide();
    });