jQuery . プログラミング 助けて下さい
変数「$displayslide」からactiveクラスを
取り除く理由がわかりません。
画像をご確認ください(progateのjQuery講座、上級編です)
「次へ」を押すと次の画像へ、「前へ」を押すと前の画像にいくスライドを作成しています。
4枚の画像があり、番号を押すとその番号の画像に切り替わります。
また、[次へ」[前へ」を押すことで、前後の画像が表示されます。
はじめに、
全画像に「display:none」のcssを使って
非表示にしておきます。
表示したい画像に「display:block」を含んだ「.active」クラスを移動させることで、選んだ画像のみを表示しています。
ここで質問です。
選んだ画像にactiveクラスが移動して、そのactiveクラスを 変数$displayslideに代入しています。
displayslideからactiveクラスを取り除いたら、空っぽの変数になるはずなのに、その後のコードで、nextとprevを使って上手にdisplayslideを使える理由がわかりません。
displayslideは、activeクラスを取り除かれたとしても、かつてactiveクラスがあった場所のことを記憶しているのですか?→それ故に「次へ」を押したときに、今表示されている画像、つまりactiveクラスを持っている画像の次の画像にactiveが移動して表示されてくれるのでしょうか?
ちなみに、変数$displayslideからactiveクラスを取り除くコードを消去すると、「次へ」のボタンを押したときに1番目の2番目の画像が両方出ます。3番の画像が表示された状態で「次へ」を押すと、3番と4番の画像が両方表示されてしまいます。
ここでは、4枚目の画像が表示されているときに[次へ」を押すと何も表示されなくなり、1枚目の画像が表示されているときに「前へ」を押しても、同じく何も表示されなくなりますが、ここでは考えないものとしてください。
写真のコードは正しいコードです。
No.1ベストアンサー
- 回答日時:
こんばんは
>displayslideからactiveクラスを取り除いたら、空っぽの変数になるはずなのに~
誤解があるようです。
変数 $displaySlide は、その時にactiveクラスを設定されている「要素」になります。
その「要素」から active クラスを削除しても、変数の内容は変わりません。
(削除したので、「activeクラスを設定してあった要素」ということになりますが)
ですので、その「要素」の次、や前の要素はそのまま正しく取得できます。
>変数$displayslideからactiveクラスを取り除くコードを消去すると、
>「次へ」のボタンを押したときに1番目の2番目の画像が両方出ます。
次の要素に activeクラスが設定されるので、結果として、「既に設定されていた要素」(= $displaySlide )と次の要素の両方に activeクラスが設定された状態になります。
activeクラスを設定すると表示する仕組みになっているのでしょうから、両方の要素が表示された状態になります。
>同じく何も表示されなくなりますが、ここでは考えないものとしてください。
1枚目の「前」や4枚目の「後」の要素は存在しないのでしょうから、それだけの処理しかしていなければ、結果的に(削除はされるが)activeクラスを付与された要素は存在しない状態になりますので、何も表示されないということになります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascript ループがうごかない 2 2021/10/25 16:19
- HTML・CSS HTMLの画像表示時のキャッシュについて 2 2021/12/21 16:09
- JavaScript javascrip 切り替えのやり方 1 2021/10/20 17:59
- JavaScript javascript ループ中の処理 1 2021/10/30 14:44
- Safari(サファリ) iPhoneで適当にサイトを見ていたら変なボタンを押してしまいました。 そうしたら自分のファイルアプ 1 2021/11/16 23:20
- Word(ワード) Wordの効率化 2 2021/11/30 00:19
- HTML・CSS HP作成 作成した画像を動画の上に配置したです。付属画像のような感じにしたいのですが、スマホのフチの 2 2022/02/02 12:22
- Excel(エクセル) Excelが分かりません。 4 2021/10/25 21:15
- 画像編集・動画編集・音楽編集 Win10背景について 1 2021/12/15 18:29
- Excel(エクセル) VGAを利用した画像表示について 4 2021/11/03 23:07
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「using Windows」でエラーが出る
-
ImageMagickでgif画像の一部が...
-
【EXCEL VBA】ダブルクリックで...
-
こんなことてしますか??
-
vb.net 画像の透過について
-
生成AI画像について
-
UWSC「画像が無い場合」
-
同じ画像を複数回表示させる
-
Pythonでgif画像が上手く作れない
-
Excel ユーザーフォームで表示...
-
jqueryスライダーを2段でスライ...
-
Jimdoで画像をポップアップ表示...
-
svgクリップパスの応用コーディ...
-
画像ファイルのストリーミング取得
-
画像を表示するには
-
HTMLでサイトの模写をしていま...
-
UWSC 画像判定と条件分岐について
-
VB6での画像のサイズ変更に関して
-
C#で画像を他の画像に貼り付け...
-
MATLABのDICOM画像表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【EXCEL VBA】ダブルクリックで...
-
こんなことてしますか??
-
Pythonでgif画像が上手く作れない
-
Excel ユーザーフォームで表示...
-
VBA シート毎に画像挿入
-
生成AI画像について
-
EXCEL VBA 複数のImageコントロ...
-
HTMLで画像をポップアップで表...
-
UWSCの色判定
-
UWSC 画像判定と条件分岐について
-
jQuery . プログラミング 助け...
-
VBAのユーザーフォームのイメー...
-
jqueryスライダーを2段でスライ...
-
vb.net 画像の透過について
-
【WPF】画像の切り替え
-
背景画像の繰り返しについて
-
「using Windows」でエラーが出る
-
画像処理したBitmapをピクチャ...
-
スマホでサイトの画像を長押し→...
-
UWSC 画像認識で条件分岐
おすすめ情報
初めて画像付きで質問しましたが、画質が低下しますね、、、
自分でももう一度調べ直してみます。