前提・実現したいこと
jQueryのbxSliderというプラグインを使用して、スマートフォンのみにスライダーを実行、PC時にはスライダーを実行させないというjsを記述しました。
そちらを読み込み時とリサイズ時に実行するというものです。
結果、色々と参考サイトを調べて解決はできたのですが、書かれている意味が一部理解ができず、そちらを解決したく質問させていただきます。
bxSliderにはパブリックメソッドの中に、destroySlider()というものがあり、一度動かしたスライダーを解除することができるのですが、それを踏まえた上で解決できたソースコードは下記です。
jQueryは3.3.1を使用しています。
解決済みのソースコード
jQuery
1$(function(){ 2 3 var slider; 4 var sliderFlag = false; 5 var breakpoint = 750; 6 7 sliderSet(); 8 $(window).on('resize', function() { 9 sliderSet(); 10 }); 11 12 function sliderSet() { 13 var windowWidth = $(window).width(); 14 if (windowWidth <= breakpoint && !sliderFlag) { 15 slider = $('.bx_Slider').bxSlider(); 16 sliderFlag = true; 17 } else if (windowWidth > breakpoint && sliderFlag) { 18 slider.destroySlider(); 19 sliderFlag = false; 20 } 21 } 22});
従来の動かなかったソースコード
jQuery
1$(function(){ 2 3 var slider; 4 var breakpoint = 750; 5 6 sliderSet(); 7 $(window).on('resize', function() { 8 sliderSet(); 9 }); 10 11 function sliderSet() { 12 var windowWidth = $(window).width(); 13 if (windowWidth <= breakpoint) { 14 slider = $('.bx_Slider').bxSlider(); 15 } else if (windowWidth > breakpoint) { 16 slider.destroySlider(); 17 } 18 } 19});
分からない事
- if文での条件分岐の際に、flagを置いて真偽を判定する記述を加えないといけないのは何故でしょうか?if文の中でtrueとfalseを実行の度に入れ替えているという意味は分かるのですが、これをそもそも分岐の際に入れないと動かなくなってしまうロジックが分かっておりません。
- sliderという変数を予め値が空の状態で定義したものを、実行のタイミングで初めて$('.bx_Slider').bxSlider();という形で入れていると思います。解決済みのデータではdestroySliderが書かれている方の記述も変数sliderで記述していますが、こちらが正しく動く理由が分かりません。関数sliderSetの外側で予め変数sliderに$('.bx_Slider').bxSlider()を入れておけば、条件分岐に関わらず動いてくれるのかなというのは分かるのですが、これをif文の中で書いてもelse側で正しく処理されている理由は何故でしょうか。現に、動かなかった従来のソースコードだと、destroySliderのところでエラーが吐かれます。こちらの処理が本来は正しいのではないかなと思うので、意味が分からなくなってきました。
従来のソースコードで起こっていたエラー
ページの読み込み時にPCサイズだった場合、このエラーが出ます。
さらにリサイズするたびに、左上の数字がどんどん加算されていきます。
これはリサイズ時に都度イベントが発生しているからというのは理解しております。
リサイズをして、スマホ幅になった瞬間に、スライダーが実行され、左の数字は一旦止まりますが、
再度PC幅に変更をしても、スライダーが解除されず、また左上の数字の加算がリスタートします。
destroySliderが実行されていないのが原因なのは分かっているのですが、
それがflagの真偽が有る無しで何故、正しく動く動かないの違いが出てくるのかが良く分かっておりません。
因みにこちら以外のエラーは吐いておりませんので、別の箇所が原因ということはないかと思います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/06 10:26
2019/03/06 10:48 編集