如果一个div在高度上等于另一个div做某事 - 在一个循环上？

Question

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

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

6个不同的div中的每一个都包含所有不同高度的图像，所以我需要每个div都被判断为＆＃39;个别。所以在一个循环中我想。

我把这个Demo放在一起试图表明我想要实现的目标，但我并不是我想要的。 - 当你盘旋在第二个＆amp;第3个div on the hover不应该显示。

$('.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();
    });

Answer 2

好的，这是一个解决方案，涉及添加一个关联$ma = array(); foreach ($this->cart->contents() as $list) { array_push($ma, $list['id']); } $na = implode(', ', $ma); echo $na; 效果的新类，并从公共:hover类中删除该悬停效果。

reveal

$('.product-img-loop').each(function () {
    var firstImg = $('.first-image').height();
    var lastImg = $('.last-image').height();
    /*alert('First image height is: ' + firstImg + '; Second image height is: ' + lastImg);*/
    if (firstImg != lastImg) {
        /*alert('image heights are DIFFERENT');*/
        $('.last-image').css('display', 'none');
        $('.newreveal').removeClass('newreveal');
        
    } else {
        alert('image heights are EQUAL');
        $('.last-image').css('display', 'block');
        
    }
});

.reveal .hidden {
    display: block !important;
    visibility: visible !important;
}
.product:hover .reveal img {
    opacity: 1;
}
.reveal {
    margin: 20px;
    position: relative;
    width: 60px;
    height: 60px;
    background-color: yellow;
}
.reveal .hidden {
    position: absolute;
    top: 0;
    width: 60px;
    background-color: red;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
.reveal .hidden.one {
    height: 60px;
}
.reveal .hidden.two {
    height: 30px;
}
.reveal .hidden.three {
    height: 80px;
}
.reveal .hidden img {
    position: absolute;
    top: 0;
}
.reveal1:hover .hidden {
    opacity: 1;
}

.newreveal:hover .hidden {
    opacity: 1;
}

Fiddle with different heights

Fiddle with equal heights