Question

我花了几个小时试图解决这个问题，但我没有取得任何进展。我有一个包含幻灯片的容器。在大屏幕上，这个容器应该是全屏的。我找到了一个脚本来做到这一点。

在较小的屏幕上，此容器的高度应该是屏幕高度的三分之一。我尝试了if / else-route - 但是它被破坏了，容器处于高度：0。

这是我到目前为止所做的，但它目前无效：

jQuery(document).ready(  
function()   
{ function setHeight()  { 

if ($(window).width() > 768) { 

windowHeight = jQuery(window).innerHeight() -90;  
jQuery('.slideshows').css('min-height', windowHeight / 3);  
setHeight(); jQuery(window).resize(function() { setHeight(); });   
} 

else  
{ windowHeight = jQuery(window).innerHeight() -90;  
jQuery('.slideshows').css('min-height', windowHeight); ;} setHeight(); 
jQuery(window).resize(function() { setHeight(); }); }  
} 

);

我不明白为什么if / else会破坏正在工作的东西 - 根据在线语法验证器，语法是正确的 - 但我想这不会因为另一个原因而以这种方式工作。（我也猜测这可能会更有效地完成，看看代码几乎完全相同，除了windowHeight除以3之外）。请帮忙。

将整个事情改为此，有效：

$(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window

    $(window).resize(checkSize);

//  $(window).resize(function(){location.reload();});
//  $(window).on('resize',function(){location.reload();});

});

//Function to the css rule

function checkSize(){
    if ($(".slideshows").css("background-color") == "transparent" ){
        // your code here

    jQuery(document).ready(function() { function setHeight() { windowHeight = jQuery(window).innerHeight(); jQuery('.slideshows').css('height', 200); }; setHeight(); jQuery(window).resize(function() { setHeight(); }); }); 
    }
     if ($(".slideshows").css("overflow") == "hidden" ){
        // your code here

    jQuery(document).ready(function() { function setHeight() { windowHeight = jQuery(window).innerHeight(); jQuery('.slideshows').css('height', windowHeight); }; setHeight(); jQuery(window).resize(function() { setHeight(); }); });
    }
    if ($(".slideshows").css("display") == "block" ){
        // your code here

    jQuery(document).ready(function() { function setHeight() { windowHeight = jQuery(window).innerHeight(); jQuery('.slideshows').css('height', 400); }; setHeight(); jQuery(window).resize(function() { setHeight(); }); });
    }
    if ($(".slideshows").css("align-content") == "center" ){
        // your code here

    jQuery(document).ready(function() { function setHeight() { windowHeight = jQuery(window).innerHeight(); jQuery('.slideshows').css('height', 500); }; setHeight(); jQuery(window).resize(function() { setHeight(); }); });
    }

}

Answer 1

通过更改css设置最小高度时，还需要指明值的类型。你有.css（'min-height'，value），值是一个变量，但它只是一个数值。你需要指出这个值是像这样的像素.css（'min-height'，value +'px'）

设置min-height时，你到处都缺少px：

jQuery('.slideshows').css('height', 500px);

根据窗口宽度使用If / else的Jquery SetHeight

1 个答案: