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も見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
JavascriptでXSSの脆弱性への対策を行いたい
JavaScript
-
特定の文字列を複数抜き出したいです。 関数かGAS、あるいは条件付き書式等で判別できたら教えて下さい
JavaScript
-
JavascriptでDOM-based XSSの発生源となるinnerHTMLを変更したい
JavaScript
-
-
4
下記問題の答えがD"になる意味がわかりません。 Cだと思ったのですが、違うのですか? なぜ、bがf"
Java
-
5
Javaって使いますか、もう古いですか?C++とどっちがいいですか?分析でC++使う授業ありましたけ
C言語・C++・C#
-
6
テキストエディタvscodeでプログラミングしているのですが、 コメントアウトだけを折りたたむ、非表
その他(プログラミング・Web制作)
-
7
C言語などをマスターして、人生に何かメリットありますか???
その他(プログラミング・Web制作)
-
8
CSS初心者です。わかる方教えてください。
HTML・CSS
-
9
SFTPなどは使わないホームページやプログラムファイルの公開方法
PHP
-
10
HTML電卓で1文字消す方法
HTML・CSS
-
11
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
12
独自ドメインのHPを編集するにはどうしたらいいでしょうか。
その他(プログラミング・Web制作)
-
13
Javaについての質問です。 コンパイルした後、 「java Sample」 で実行しようとしても出
Java
-
14
ホリエモン ひろゆきはプログラマーになればお金が儲かると言いますが嘘で? IT土方というのは正しい
その他(プログラミング・Web制作)
-
15
サクラエディタ・マクロ → VSCode・マクロに変更
その他(プログラミング・Web制作)
-
16
複雑なシフト表から1日ごとの出勤者、シフトを抜き出したいです
Excel(エクセル)
-
17
JavascriptでDom XSSの脆弱性対策を行いたい
JavaScript
-
18
PHP8を使うと、大量のWarningが発生してしまいます。
PHP
-
19
SQLの中上級者へのレベルアップ方法について
Oracle
-
20
フロントエンドフレームワークの定数について
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Pythonでgif画像が上手く作れない
-
EXCEL VBA 複数のImageコントロ...
-
UWSCの色判定
-
イメージマップでマウスオーバ...
-
jqueryスライダーを2段でスライ...
-
こんなことてしますか??
-
uwscについて質問です。
-
Excel ユーザーフォームで表示...
-
画像の2次元フーリエ変換の結...
-
【EXCEL VBA】ダブルクリックで...
-
Pythonのプログラム初心者の問題
-
自作の地図をグーグルマップの...
-
VBAのユーザーフォームのイメー...
-
UWSCの画像認識と条件分岐につ...
-
画像の一部だけが点滅する画像...
-
ヒストグラム類似度による画像...
-
Leafletで画像をon、offさせる...
-
gif画像が壊れて読み込まない
-
UWSCについて
-
PowerPoint VBA で画像の鮮明度...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
こんなことてしますか??
-
【EXCEL VBA】ダブルクリックで...
-
Excelで画像URLを1つずつセル...
-
EXCEL VBA 複数のImageコントロ...
-
HTMLで画像をポップアップで表...
-
背景画像の繰り返しについて
-
Excel ユーザーフォームで表示...
-
gif 画像上の ボタンに リン...
-
VBA シート毎に画像挿入
-
jQuery . プログラミング 助け...
-
VBAのユーザーフォームのイメー...
-
jqueryスライダーを2段でスライ...
-
ホームページバナーを(画像が...
-
「using Windows」でエラーが出る
-
スマホでサイトの画像を長押し→...
-
【WPF】画像の切り替え
-
PowerPoint VBA で画像の鮮明度...
-
画像のピクセルデータの取得
-
UWSCの色判定
-
UWSCを使った画像認証マク...
おすすめ情報
初めて画像付きで質問しましたが、画質が低下しますね、、、
自分でももう一度調べ直してみます。