単純に
if (check = 0){
と
}else if(check = 1){
が代入になっているのが原因では？
Like!
モーダルウィンドウのJqueryでの表示/非表示の切り替え法
解決したいこと
モーダルウィンドウのJqueryでの表示/非表示の切り替え法
現在、簡単なログイン機能ありのサイトを作成しており、
サインインボタンをクリックしてログインフォームを表示させるように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文にした時の構文の何かが原因になっているのはわかるのですが、勉強不足につきそこまでの予測しか立てられず困っております。
何かご助言いただけると幸いです。
0
2Answer
1
具体的にどう"上手くいかない"のか、どうなれば"上手くいった"になるのかを記載していただけると回答しやすいですね。
おそらくですが、非表示にならないのかなと想像してます。
まず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を入れて、どのように処理されているのか確認してみましょう。
Like!