jQueryで画面幅ごとに処理を変えたいのですが、うまくいきません。

jqueryをしようして画面幅に応じて動かす画面遷移の幅を変えようとしています。
しかし、以下のコードでは画面が動いてくれません。
クリックファンクションは上記の外側で定義しています。

もしかして、resizeのなかで定義（今回はmoveFunc）はできないのでしょうか？

javascript
1$(window).resize(function(){
2    var w = $(window).width();
3    var x = 415;
4    if (w <= x) {
5        $(".qBox").css("width", "300px");
6        function moveFunc(vol){
7            var myPos = (vol+1) * -300;
8            $("#qContainer").delay(500).animate({left: myPos},500);
9        };
10    } else {
11        function moveFunc(vol){
12            var myPos = (vol+1) * -650;
13            $("#qContainer").delay(500).animate({left: myPos},500);
14        };
15    }
16});
17

ちなみに、$(".qBox").css("width", "300px");はきちんと機能します。
足りない情報などありましたら教えていただきたいです。
どうかご教授の方よろしくお願いいたします????‍♂️

selectArray = [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
scoreArray = [0,0,0,0,0,0,0,0,0,0];
qNum = selectArray.length;

function quesFunc(){
        var idArray = this.id.split("_");
        var qID = Number(idArray[0]);
        var ansID = Number(idArray[1]);

        var selectID = selectArray[qID];

        if (ansID == selectID) return;

        $("#" + qID + "_" + ansID).addClass("selected")
        $("#" + qID + "_" + selectID).removeClass("selected");

        selectArray[qID] = ansID;
        
        moveFuncWide(qID);
        moveFuncNarrow(qID);

        scoreArray[qID] = Number($(this).attr("sc"));
        
        if (qID + 1 >=qNum) resultFunc();
        
}



        
function moveFuncWide(vol){
            var myPos = (vol+1) * -650;
            $("#qContainer").delay(500).animate({left: myPos},500);
            return false;
        }
        
function moveFuncNarrow(vol){
    
            var myPos = (vol+1) * -300;
            $("#qContainer").delay(500).animate({left: myPos},500);
            return false;
        }
        
// 両方動いてしまっている。条件によって片方だけ動かしたい


$(window).resize(function(){
    var w = $(window).width();
    var x = 415;
    if (w <= x) {
        $(".qBox").css("width", "300px");
        moveFuncNarrow();
    } else {
        moveFuncWide();
    }
});
.
.
.
$(function(){
    
    $("ul>li").click(quesFunc);
});

アドバイスをいただいたように、moveFuncNarrowとmoveFuncWideを定義したのですが、両方動いてしまいます。
画面幅に応じてどちらか片方を動かしたいです。return文とかなのかなと思ったのですが、うまく使えませんでした...。ご教授いただきたいです。

追記（条件式をquesFunc内でも定義してみました）

javascript
1function quesFunc(){
2        var idArray = this.id.split("_");
3        var qID = Number(idArray[0]);
4        var ansID = Number(idArray[1]);
5
6        var selectID = selectArray[qID];
7
8        if (ansID == selectID) return;
9
10        $("#" + qID + "_" + ansID).addClass("selected")
11        $("#" + qID + "_" + selectID).removeClass("selected");
12
13        selectArray[qID] = ansID;
14        
15        
16        $(window).resize(function(){
17            var w = $(window).width();
18            var x = 415;
19            if (w <= x) {
20                $(".qBox").css("width", "300px");
21                moveFuncNarrow(qID);
22            } else {
23                moveFuncWide(qID);
24            }
25        });
26        
27        
28      　moveFuncNarrow(qID);
29        moveFuncWide(qID);
30
31        scoreArray[qID] = Number($(this).attr("sc"));
32        
33        if (qID + 1 >=qNum) resultFunc();
34        
35}
36
37
38
39        
40function moveFuncWide(qID){
41            var myPos = (qID+1) * -650;
42            $("#qContainer").delay(500).animate({left: myPos},500);
43            
44        }
45        
46function moveFuncNarrow(qID){
47    
48            var myPos = (qID+1) * -300;
49            $("#qContainer").delay(500).animate({left: myPos},500);
50            
51        }
52        
53// 両方動いてしまっている。条件によって片方だけ動かしたい
54
55
56 $(window).resize(function(){
57            var w = $(window).width();
58            var x = 415;
59            if (w <= x) {
60                $(".qBox").css("width", "300px");
61                moveFuncNarrow(qID);
62            } else {
63                moveFuncWide(qID);
64            }
65        });
66

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

回答1件

ベストアンサー

定義と実行は、別のものです。
function moveFunc() {}
のように定義するならば、
moveFunc()
と呼び出してあげないと実行されません。

ご提示のコードではvolが何か特定できませんが、
resize関数の外側でmoveFuncNarrowとmoveFuncWideなどの名前で関数を定義して、
条件式の中で呼び出すとよいかと思います。

投稿2019/06/24 10:47

yu-smc

総合スコア610

ueda_kesuke

2019/06/24 11:20

ありがとうございます！ご指摘通り書いてみたら動きました。とても助かりました。しかし今度は$(".qBox").css("width", "300px");の部分が機能しなくなってしまいました。これは条件の中で呼び出すように変更した記述と関係があるのでしょうか？

ueda_kesuke

2019/06/24 11:24

$(".qBox").css("width", "300px");もmoveFuncNarrowの定義側に書いてみたのですが、きちんと機能してくれませんでした。

yu-smc

2019/06/24 14:21

修正後のコードを見せていただけますでしょうか？

ueda_kesuke

2019/06/24 22:33

かしこまりました。

yu-smc

2019/06/25 02:29

みさせていただきました。 clickイベントが発生したときにquesFuncが実行されますが、quesFuncの中でmoveFuncNarrowとmoveFuncWideが両方呼び出されていますね。このふたつの関数は、clickイベントとresizeイベントの両方に対して実行したいものなのでしょうか。であれば、quesFuncの中にも画面の幅に応じて分岐する条件式を書かないといけません。それと、そことは関係ないですがresizeの中のmoveFuncNarrowとmoveFuncWideを呼び出す際に引数が抜けています。

ueda_kesuke

2019/06/25 03:22

ありがとうございます！ご指摘通りquesFuncの中でも条件式を記述しました。しかしやはり両方が呼び出されてしまいます。 moveFuncNarrow(qID); moveFuncWide(qID); の部分をコメントアウトしたり、quesFuncの外にある条件式をコメントアウトしたりしたのですが、うまくいきません...。 varで定義するのかと考えましたが、moveFuncは2つ以上のアクションがあるためできませんでした。また先ほどまであったvolという引数はわかりづらかったのでqIDに統一いたしました。

yu-smc

2019/06/25 03:29

``` $(window).resize(function(){ var w = $(window).width(); var x = 415; if (w <= x) { $(".qBox").css("width", "300px"); moveFuncNarrow(qID); } else { moveFuncWide(qID); } }); 　moveFuncNarrow(qID); moveFuncWide(qID); ``` 下の２行が残ってしまっています。ここをなくさないと両方呼び出される状況はなくなりません。また、quesFuncの中にresize関数を入れてしまうのはおかしいです。if文のみ書いてみてください。

yu-smc

2019/06/25 03:33

あと、qIDはquesFuncの外側で定義しないと、下のresize関数の中で使えません。（内側で定義したものはquesFuncの中でのみ使える）

ueda_kesuke

2019/06/25 03:39

解決できました！！！本当にありがとうございました。javascriptの正しい検索能力がない中、懇切丁寧にアドバイスしていただいて本当に助かりました。

yu-smc

2019/06/25 03:42

解決したようでよかったです。動かないものを動くように直すことはプログラミングの理解が深まる効果的な練習だと思っています。これからも頑張ってください！

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