addEventListenerで得た値を他の引数に渡したい。
すいませんまだ勉強したばかりなので”引数”や”hoge”の使い方が違っているかもしれません。
画面サイズが変わった時、横が1200px以下の場合はtrue,1200より大きい場合はfalseをhogeに代入しレスポンシブデザインの変更をしようと思っていますがhogeの値を受け渡しできてないようです。
window.addEventListener("resize",function(){ hoge = window.matchMedia("(max-width:1200px)").matches; console.log(hoge); //ここまではhogeの値が取得でき正常に動いています。 }); //ここからhogeの値が入っていません。 if(hoge){ 処理...... } else{ 処理..... }
if()のところにtrue,falseを入れるにはどうすればいいのでしょうか?
##追加
MediaQueryListを使っても思い通りの結果にならなかったのでif文のコードも追加します。
if (e.matches){ var timer = setInterval(function() { (indexSlider).fadeOut("slow").removeClass(BGsize[index]); index=(index+1)%4; (indexSlider).fadeIn("slow").delay(2000).addClass(BGsize[index]); console.log("大きい"+af); }, 3000); }
以下関連の全コード
var af=window.matchMedia("(max-width:767px)"); function testes(e){ if (e.matches){ var timer = setInterval(function() { (indexSlider).fadeOut("slow").removeClass(BGsize[index]); index=(index+1)%4; (indexSlider).fadeIn("slow").addClass(BGsize[index]); }, 3000); } else{var timer = setInterval(function() { (indexSlider).fadeOut("slow").removeClass(SMsize[index]); index=(index+1)%4; (indexSlider).fadeIn("slow").addClass(SMsize[index]); }, 5000); } } af.addListener(testes); ///下記のコードで初期値で入れていました。コードを変えたことでこれも問題あるとわかるのですが解決ができていないためそのまま載せます。 if (!af.matches){ indexSlider.addClass(BGsize[0]); } else if(af.matches){ indexSlider.addClass(SMsize[0]); } ///ここまで
MediaQueryListを使ってダメだった点:
1.767サイズより大きいサイズだった場合if(e.matches)=trueが反応しない。動的に小さくなった時にtrueの処理が始まる。
2.767サイズより小さい場合elseの処理が始まらない。動的に大きくなりまた小さくなると処理が始まるが,if trueとelseの両方の処理が繰り返される。
実現したいことウィンドウを開いたとき画面サイズを所得してif文(繰り返させるtimer)を起動させる。
サイズが変わった時、処理を終了(繰り返しのtimerを停止)させてif文を実行する。(現状だと両方実行してしまうため)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/03/19 04:44
2019/03/19 04:48 編集
2019/03/19 04:51
退会済みユーザー
2019/03/19 05:36
2019/03/19 05:44
退会済みユーザー
2019/03/20 01:47