@nekogamisong7posted at 2023-01-25

モーダルウィンドウのJqueryでの表示/非表示の切り替え法

Q&A

解決したいこと

現在、簡単なログイン機能ありのサイトを作成しており、
サインインボタンをクリックしてログインフォームを表示させるようにJqueryでコーディングしています。

発生している問題・エラー

ログインフォームをモーダルウィンドウで表示させたいのですが、表示/非表示の切り替えが上手くいかず悩んでいます。
Jqueryでは変数checkを用意して、そこにモーダルウィンドウがshowのときに１、hideのときに０になるようにif文で定義しています。
また、元々CSSにてモーダルウィンドウは{display:none}を指定しています。

$(function(){
    var check = 0;
    if (check = 0){
        $('.signin, .sp_signin').click(function(){
            $('open-modal').show();
            check = 1;
        });
    }else if(check = 1){
        $(document).click(function(e) {
            if(!$(e.target).closest('#signin_box').length) {
                $('open-modal').hide();
            }
        });
        check = 0;
    }
});

.signin, .sp_signinはサインインボタン
open-modalはモーダルウィンドウ
#signin_boxはログインフォームです。

試したこと

$('.signin, .sp_signin').click(function(){
            $('open-modal').show();
            check = 1;
        });

上記のコードのみで実行した際はサインインボタンを押すとモーダルウィンドウが表示され、上手く作動しました。

また、モーダルウィンドウのCSSの{display:none}を{display:block}に変えて
最初から表示されるようにして

$(document).click(function(e) {
            if(!$(e.target).closest('#signin_box').length) {
                $('open-modal').hide();
            }

上記のコードを実行したときもちゃんとログインフォーム以外をクリックしたらモーダルウィンドウが閉じられるよう作動していました。

おそらく、if文にした時の構文の何かが原因になっているのはわかるのですが、勉強不足につきそこまでの予測しか立てられず困っております。
何かご助言いただけると幸いです。

@blue32a posted at 2023-01-25

具体的にどう"上手くいかない"のか、どうなれば"上手くいった"になるのかを記載していただけると回答しやすいですね。

おそらくですが、非表示にならないのかなと想像してます。

まずjQueryのclickメソッドですが、これはイベントリスナーを登録する処理になります。
（clickに限らずですが）
その上でコードを見てみましょう。

$(function(){
    // ここは最初に１回だけ実行される
    var check = 0;
    if (check = 0){
        // checkは0なので、ここが実行される
        console.log('check = 0');
        $('.signin, .sp_signin').click(function(){
            console.log('click .signin, .sp_signin');
        });
    }else if(check = 1){
        // checkは0なので、ここは実行されない
        console.log('check = 1');
        $(document).click(function(e) {
            console.log('click document');
        });
        check = 0;
    }
});

実行時に変数checkの値は0なので、check = 1の場合の処理は実行されず、イベントリスナーも登録されません。
つまり「documentがclickされたらこの処理をしてね」という指示がされていない状態になっていると思います。

例のようにconsole.logを入れて、どのように処理されているのか確認してみましょう。

0Like

Are you sure you want to delete the question?

モーダルウィンドウのJqueryでの表示/非表示の切り替え法

解決したいこと

発生している問題・エラー

試したこと

2Answer

Your answer might help someone💌