使用 jquery 更改 div 高度时显示图像

Question

我在右栏中有一张图片，在左栏中有一张 div。现在我想隐藏图像，它应该只在 div 高度达到 650px 时显示。

我进行了一些谷歌搜索，发现可以通过 if elsejquery 中的语句来实现。但是没有找到正确的突破口

求推荐。

Answer 1

你可以像这样用 .toggle() 做一些事情：

$('img').toggle(function(){
     return $('divLeft').height() >= 650;
});

Answer 2

您可以在 css 文件中使用媒体查询，首先不需要 jquery

@media(max-height:650px){
 #img-id{
  display:none;
 }
}

然而，正如您所说的那样，它是一个 div 元素，您可以使用 jquery

如本问题所述 jquery resize listener on a div

正如线程 poelinca 提供的建议，有一些不错的插件可用于此功能。

如果您不喜欢插件的想法，另一个简单的解决方案是只要内容被修改就在 div 上触发 "resize" 事件。然后您可以使用优雅的观察者模式按预期使用 resize() 对其进行监视。

function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
   // all your magic resize mojo goes here
});

所以我会把它修改成

    function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
if( $('divLeft').height() >= 650){ 
    $("#img-id").hide();
  }
else {
$("#img-id").show();
}

});

Answer 3

如果你使用媒体查询，你可以这样做..

@media(min-height:650px){
 #image-id{
  visibility: visible
 }
}

在媒体查询外部或 @media(min-height:650px) 行内，给出

#image-id{
  visibility:hidden
 }

希望对您有所帮助....

使用 jquery 更改 div 高度时显示图像

show image when div height is change using jquery

html

jquery

height

show-hide