Jquery Setウィンドウ幅に応じた高さIf/elseを使用して

Question

これを理解しようと数時間を費やしましたが、何も進んでいません。私はスライドショーを含むコンテナを持っています。大きな画面では、このコンテナは全画面表示になっています。私はちょうどそれをするスクリプトを見つけました。

小さい画面では、このコンテナの高さは画面の高さの3分の1になります。私は、もし/他のルートを行くしようとした - しかし、それは壊れていると、コンテナは高さである。ここでは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'、値+ 'PX'）のようなピクセルであることを示す必要があります。

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