質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4180閲覧

jQueryプラグイン「bxSlider」での条件分岐の判定に関して

memoranote

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/03/06 09:43

編集2019/03/06 10:25

前提・実現したいこと

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の真偽が有る無しで何故、正しく動く動かないの違いが出てくるのかが良く分かっておりません。

因みにこちら以外のエラーは吐いておりませんので、別の箇所が原因ということはないかと思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

エラーの内容を拝見し、
再度回答させていただきます。

エラーは、destroySliderが存在しないことを表しておりますので、
flag管理をすることによって、
要素をjQueryプラグインに適用する前に(要素がdestroySliderメソッドを保持していない)、条件分岐でelseを通るのを防いでいる、状態です。
要は、flagがtrueになることによって、初めて、
ウィンドウ幅がPCかつ、jQueryプラグインを適用している(要素にdestroySliderメソッドが存在する)という状態で、
destroySliderメソッドを実行、という流れを作れています。

従来のソースコードでは、
ウィンドウ幅がPCの場合は、とにかく、destroySliderメソッドを実行!としてしまっているため、
jQueryプラグイン適用前に(destroySliderが追加されていない状態)、elseを通り、実行してしまっているということでしょう。

また、同時に、重複イベント追加というのも(処理の重複)同時に防いでいるかと思います。

-------- 以下元回答 --------

エラーの内容を見ないとなんとも言えない部分がありますが、
うまく行かなかった時のコードは、
”リサイズのたびに、無限にjQueryイベントが追加される”
からかと思われます。
古い方だと、条件フラグがないため、
リサイズのたび、画面サイズが小さい場合、無条件で、イベントを追加します。
リサイズのスピードにもよりますが、
下手すると、一秒間に一万回とか実行されるでしょう。

しかし、うまくいく方のコードでは、画面サイズの他に、
すでにイベントを既に追加している状態の場合は、イベントをこれ以上追加しない、
とするために、flagを設けている状態です。

よって、おそらく、古い方がうまく動かなかったのは、重複してjQueryイベント追加がされたことが、
原因かと思われます。

しかし、エラー内容の記載がないため、なんともいえないのであしからず。

投稿2019/03/06 10:11

編集2019/03/06 10:44
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

memoranote

2019/03/06 10:26

ご連絡ありがとうございました。エラー時のキャプチャを追加で記載しております。 destroySliderの部分がやはりおかしいのでしょううか。
miyabi_takatsuk

2019/03/06 10:48 編集

そうですね、実行タイミングの問題のようです。 エラーの内容を見て、わかったのは、 従来のコードだと、要素にdestroySliderメソッドが、プラグイン適用されていない状態なのに、elseが通ってしまって、destroySliderが実行されてしまっているということです。(jQueryプラグインを要素に適用した際に初めて、destroySliderメソッドが有効になります) フラグで管理することによって、jQueryプラグインを適用していな状態で、destroySliderメソッドが実行されるのを防いでいるのでしょう。(else側を通らないようにしている) すみません、私自身、勘違いしていた部分もあるようなので、回答を修正しますね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問