.clickイベントなどの外で代入した変数が.clickイベントで動作しない。

javascript
1$(function(){
2    var w = $(window).width();
3    var x = 769;
4
5    $(window).resize(function() {
6        if (w >= x) {
7            $(".gnav").show();
8        } else {
9            $(".gnav").hide();
10        }
11    });
12
13    $(".gnav li").click(function() {
14        if (w >= x) {
15            ;
16        } else {
17            $(".gnav").hide();
18        }
19    });
20});

同じ変数を使用するので、
var w = $(window).width(); var x = 769; これらの変数を1回書くだけで済ませたいです。
イベント両方に変数を代入すると、ちゃんと動作するのですが、上記の方法だと動作しなくなります。
varを書かずに代入してみたりいろいろ調べてみたんですが、解決しませんでした。
どうすればいいでしょうか？よろしくお願いします。

m.ts10806

2019/08/26 05:34

xは見たところ固定のようですけど、widthの方だけの話でしょうか

退会済みユーザー

2019/08/26 05:37

なるほど、勘違いしていました。 widthは値が変わるので、毎回代入してあげないといけないということでしょうか。その場合でも1度書くだけで済ませる方法はありますか？

m.ts10806

2019/08/26 05:38

>widthは値が変わるので、毎回代入してあげないといけないということでしょうか。はいそうですね。resize()のときには値が変わってますので毎回必要です。 >その場合でも1度書くだけで済ませる方法はありますか？幾つかありますが、簡単な手法だけで回答としておきますね（HTMLが提示されていませんし、イメージなので未検証です）

行動規範の内容に同意します

回答1件

ベストアンサー

関数で共通化。
違うところだけ分岐。

※未検証コードです。実装イメージだけ参考にしてください

js
1$(function(){
2    var w = $(window).width();
3    var x = 769;
4
5    $(window).resize(function() {
6        gnavToggle(false);
7    });
8
9    $(".gnav li").click(function() {
10        gnavToggle(true);
11    });
12});
13function gnavToggle(navclick){
14    w = $(window).width();
15    if (w >= x) {
16        if(!navclick){
17            $(".gnav").show();
18        }
19    } else {
20        $(".gnav").hide();
21    }
22}
23