2016-08-08 21 views
0

私がしようとしているのは、関数が呼び出されるたびに、以下の関数のif/else文がチェックされるようにすることです。私は私のHTMLに関数が呼び出されるたびにif/else文がチェックされるようにするにはどうすればよいですか(JavaScript)?

のonclick = "openNav()"

を使用してそれを呼び出します。あなたのご協力ありがとうございます。申し訳ありませんが、これはJavaScriptに慣れているような不安な質問です。以下

コード:スニペット以下

var intViewportWidth = window.innerWidth; 
 

 
function openNav() { 
 

 
\t $("body").css("background-color", "rgba(0,0,0,.4)"); 
 

 
\t if (intViewportWidth < 1200) { 
 

 
\t \t $("header nav").css("width", "100%"); 
 
\t \t $("body").css("margin-right", "100%"); \t 
 

 
\t } 
 
\t else { 
 

 
\t \t $("header nav").css("width", "30%"); 
 
\t \t elBody.css("margin-right", "30%"); 
 

 
\t } 
 

 
\t $("#hamburger").hide(); 
 

 
}

+0

'VAR intViewportWidth = window.innerWidthを移動してみてください;'あなたの関数の内部で。 – SimianAngel

+0

それは動作します、ありがとうございます。 :) –

+0

確かに! 'onclick'を使って' openNav() 'を呼び出すと、あなたの関数は' intViewportWidth'が何を表しているのか分かりません。変数が定義されておらず、条件付きロジックに決して到達していないため、ブラウザーはおそらく参照エラーをスローします。この関数をいつでも呼び出すと、ウィンドウの幅を評価して、ナビゲーションが適切なスタイルで応答できるようにしたいと思うでしょう。 – SimianAngel

答えて

1

使用。幅が関数内にない限り、intViewportWidthは変更されません。

function openNav() { 
 
    
 
\t $("body").css("background-color", "rgba(0,0,0,.4)"); 
 
    
 
    var intViewportWidth = window.innerWidth; 
 
\t if (intViewportWidth < 1200) { 
 

 
\t \t $("header nav").css("width", "100%"); 
 
\t \t $("body").css("margin-right", "100%"); \t 
 

 
\t } 
 
\t else { 
 

 
\t \t $("header nav").css("width", "30%"); 
 
\t \t elBody.css("margin-right", "30%"); 
 

 
\t } 
 

 
\t $("#hamburger").hide(); 
 

 
}

関連する問題