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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

1937閲覧

【JS条件分岐の方法】〇番目のスライダーが表示されたときにある要素を非表示にしたい。

ems

総合スコア23

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2019/05/27 01:22

編集2019/05/27 08:11

スライダーはbxsliderを使用しています。
スライダーはループautoにしています。

やりたいこと
流れるスライダーのコンテンツは4つあり、4つ目の”コンテンツD”が表示されたときに、スライダー外のあるdiv要素の”テキストテキスト”を非表示としたいです。あと、スライダーはコンテンツDで止めたいです。

javascriptの条件分岐で「〇番目のスライダーが表示されたとき、ある要素を非表示にする」なんてことができるかなと思って、
いろいろと調べていたのですが、javascript超初心者でたどり着けず、こちらに質問投稿させていただきました。
お分かりになる方いましたら教えてください。

HTML5

1 <div class="slider" style="text-align: center;"> 2 <div class="ani ani-text"> 3 <span class="text-wrapper"> 4 <span class="letter color01">コンテンツA <span>.</span></span> 5 </span> 6 </div> 7 <div class="ani ani-text"> 8 <span class="text-wrapper"> 9 <span class="letter color02">コンテンツB <span>.</span></span> 10 </span> 11 </div> 12 <div class="ani ani-text"> 13 <span class="text-wrapper"> 14 <span class="letter color03">コンテンツC <span>.</span></span> 15 </span> 16 </div> 17 <div class="ani ani-text"> 18 <span class="letter color04">コンテンツD <span>.</span></span> 19 </div> 20 </div> 21 <div class="ani">テキストテキスト</div>

bxslider

1 $(window).on('load', function(){ 2   $('.slider').bxSlider( 3 { 4 mode:"horizontal", 5 auto: true, 6 slideWidth: 440, 7 controls:false, 8 infiniteLoop: false 9 }); 10 });

以上

追記:
https://bxslider.com/install/
バージョンは4.2.12です。

追記2:
今、非表示としたい<div>要素”テキストテキスト”にid="aniLast"を付与し、いただいた情報を基に、以下の様に書いています。

javascript

1$(window).on('load', function(){ 2   $('.slider').bxSlider( 3 { 4 mode:"horizontal", 5 auto: true, 6 slideWidth: 360, 7 controls:false, 8 infiniteLoop: false, 9 onSlideAfter: function($slideElement, oldIndex, newIndex){ 10 document.getElementById("aniLast").remove(); 11 } 12 }); 13 }); 14

$slideElement, oldIndex, newIndexの使い方がわかりません><

追記3:
var nextIndex = 2; として以下を実行しましたが、2つ目のスライド”コンテンツB”の時に"テキストテキスト"が非表示となってしまう。

javascript

1 var newIndex = 2; 2 3 $(window).on('load', function(){ 4   $('.slider').bxSlider( 5 { 6 mode:"horizontal", 7 auto: true, 8 slideWidth: 360, 9 controls:false, 10 infiniteLoop: false, 11 speed:450, 12 onSlideAfter: function(newIndex){ 13 document.getElementById("aniLast").remove(); 14 } 15 }); 16 });

追記4:
したいように非表示ができました!!

javascript

1 $(window).on('load', function(){ 2   $('.slider').bxSlider( 3 { 4 mode:"horizontal", 5 auto: true, 6 slideWidth: 360, 7 controls:false, 8 infiniteLoop: false, 9 speed:450, 10  onSlideAfter: function(elem,oid,nid) { 11 console.log(oid); 12 console.log(nid); 13 if (nid == 3) { 14 document.getElementById("aniLast").remove(); 15 } 16 } 17 }); 18 });

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

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

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

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

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

m.ts10806

2019/05/27 01:28

bxsliderのバージョンはいくつでしょうか。 念のため取得先サイト・公式サイトのURLをリンクでご提示ください。
m.ts10806

2019/05/27 02:26

質問本文に追記してください(こちらはデフォルト非表示です)
m.ts10806

2019/05/27 02:28

あと細かいのですが、提示のHTML </div>が1つ余計ですね。 実際のコードもそうなっていますか?
ems

2019/05/27 04:38

</div>余計でした。実際のコードはあっているのでコピペミスです。お気づきいただきありがとうございました。 また先ほどバージョンについて質問本文に追記しました。よろしくお願いいたします。
guest

回答2

0

ベストアンサー

OptionsのCallbacksにスライドの状態によるイベントが取得できるようになります。
onSlideAfterとか良さそうですね。

Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).

@各スライドトランジションの直後に実行されます。関数の引数は現在のスライド要素です(遷移が完了したとき)。

そのときに現在の要素を$(this)とかで取得し、「特定のスライド(指定の番号)だったら」の条件を入れてはどうでしょうか。

js

1 $(window).on('load', function() {   2 $('.slider').bxSlider({ 3 mode: "horizontal", 4 auto: true, 5 slideWidth: 440, 6 controls: false, 7 infiniteLoop: false, 8 onSlideAfter: function() { 9 console.log($(this)); 10 } 11 }); 12 });

n番目を指定するのであれば.sliderから見たときに何番目の要素か・・・で判断すると良いのですが、
HTMLを変えられるのであれば、例えばdata属性とかで「非表示対応させる」フラグを持っておいてそのフラグを拾ったほうが楽そうです。

追記:
マニュアルのコールバック関数に「何番目か」がとれることが書いてありました。

Arguments

$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)

第3引数が「今のスライドの番号」なので、これで判断できます。

js

1 $(window).on('load', function() {   2 $('.slider').bxSlider({ 3 mode: "horizontal", 4 auto: true, 5 slideWidth: 440, 6 controls: false, 7 infiniteLoop: false, 8 onSlideAfter: function(elem,oid,nid) { 9 console.log(oid); 10 console.log(nid); 11 } 12 }); 13 });

追記を受けて

おそらく「変数のスコープ」「引数」「戻り値」あたりをきちんと学習する必要がありそうです。

定義した変数と関数の引数で受け取った情報は違います。

js

1var id = 1; 2 3function test(id){ 4 console.log(id); 5} 6test(2); 7//出力結果:2

今回は「コールバック引数」でnewIdが返ってくるわけですが、これも同じです。
関数の引数部分に設定する変数名はなんだっていいのです。(私もoid,nidとしていますよね)

js

1var id = 1; 2function test(argid){ 3 console.log(id); 4 console.log(argid); 5} 6test(2); 7//出力結果: 8//1 9//2

ここで「1」と出力されるのはidという変数がグローバルスペースにて宣言されたためです。
今回は「newIdが指定値だったら」を実現するので、私が提示したミニマムコードで言うと、下記のような書き方をすると「指定値と実際の値の比較」ができます。

js

1var id = 1; 2function test(argid){ 3 if(argid == id) { 4 console.log('Match'); 5 }else{ 6 console.log('Not Match'); 7 } 8} 9test(2);

投稿2019/05/27 02:36

編集2019/05/27 07:01
m.ts10806

総合スコア80765

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

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

kei344

2019/05/27 02:43

onSlideAfter は function($slideElement, oldIndex, newIndex)を拾えるみたいなのでそれを使うほうが早そうです。 【定番のスライドショーjQueryプラグイン「bxSlider」の Callback関数まとめ | WEBMAN】 https://webman-japan.com/webcreate/bxslider-callback/
m.ts10806

2019/05/27 02:44

本当ですね。OptionsのArgumentsにちゃんと書いてありました。 $slideElement: jQuery element of the destination element oldIndex: element index of the previous slide (before the transition) newIndex: element index of the destination slide (after the transition)
m.ts10806

2019/05/27 02:47

補足ありがとうございます。 検証できたのでコード追記しておきました。
ems

2019/05/27 05:06

ありがとうございます。 n番目というのは、どうやって指定できるのか教えていただけませんでしょうか。 質問本文にまた追記します。
ems

2019/05/27 05:08

質問本文、追記いたしました。
m.ts10806

2019/05/27 05:09

n番目って任意の番号ですよね。 自身で決めることでは?(例えば3番目にしたいとか、それは作る側が決めることです)
m.ts10806

2019/05/27 05:09

newIndexは「今表示されているスライド番号」です。
ems

2019/05/27 05:40

3番目にしたい場合、どう書けば3番目と指定できるのでしょうか。その指定の仕方がわからないくて。
m.ts10806

2019/05/27 05:43

グローバルに変数宣言しておいてその値とnewIndexが合致しているか見てはどうでしょうか。 まあ下記のように直に書いてもいいですけど(indexは0が1番目です) if(newIndex == 2){ }
ems

2019/05/27 05:54

if(newIndex == 2){ } をどこに挿入すればいいのでしょうか。当方javascriptの超入門者でして、申し訳ございません。もう少し教えてください!!.,
m.ts10806

2019/05/27 05:56

えーと。確認。私の回答でに書いてある下記は、何をしているか分かりますか? あとif含めた条件分岐、変数についてはどの程度認識がありますか? onSlideAfter: function(elem,oid,nid) { console.log(oid); console.log(nid); }
m.ts10806

2019/05/27 05:58

※ 「コードください」は非推奨なので、なるべく回答をヒントに試行錯誤(trial and error)してもらいたいというのが実際のところです。 動かなかったとしてもそれは構文が間違っていたりロジックが間違っていたりするだけなので、色々そこは書き方や書く位置などを調整して自身で理解を深めてもらいのです。 (コピペで動くコードをもらって「できた気」になって結局落とし穴に落ちたままの初心者を数おおく見てきていますので・・・)
ems

2019/05/27 06:27

怒らないでくださいね。私はコードだけくださいっていう風には全然思っていません。しっかり学びたいです。教えてください...!!面倒な質問者に当たっちゃってすみません。 onSlideAfter: function(elem,oid,nid) { console.log(oid); console.log(nid); }  こちらは、 elem,oid,nidのスライド直後にoidとnidの値を出力してね! という意味であってますでしょうか。 if含めた条件分岐、変数の認識は、言葉としてvar = nextIndexが 80で、80以上だつたらA、そうでなかったらBのようなレベルなら理解できます。。
m.ts10806

2019/05/27 06:31

>あってますでしょうか。 合ってます。 ただ確認する場所は「コンソール」で通常はブラウザの開発ツール(デベロッパーツール)を開いて「 Console」のタブとなります。 なおconsole.log()はプログラミングで問題切り分けは検証を行う作業である「デバッグ」をJavaScriptで行うための絶対に覚えておく機能の1つです。下記のような記事も確認しておいてください。 https://ics.media/entry/190517/ >言葉としてvar = nextIndexが 80で、80以上だつたらA、そうでなかったらBのようなレベルなら理解できます。。 ではまずそのように組んでみましょう。 先に書きましたが、動かなかったとしてもそれは構文が間違っていたりロジックが間違っていたりするだけで、「なぜ動かないか」「何が起きているか」を確認していくことで理解が深まります。
ems

2019/05/27 06:50

追記3として質問本文を追記しました。 consolelogで2と表示されたました。が、2つ目のスライドで非表示となってしまいました。
m.ts10806

2019/05/27 07:09

回答追記しました。 追記3ってどこにもifで分岐をかけていませんね。 回答に記載した通りグローバルに宣言した変数とコールバック引数で受け取った変数は名前を同じにしても値が同じになるわけではありません。 また関数が受け取る引数は3つあるので(私も回答でArgumentsを引用していますね)、 もしnewIndexを受け取りたいのでしたらきちんと3つ受け取るように書く必要があります。 ※私の最初の回答のコード参照。
ems

2019/05/27 07:59

追記を受けて「変数のスコープ」「引数」「戻り値」についてご教示くださりありがとうございます。まさに、この3点、全然理解できません。。(┯_┯) ううぅぅ。リファレンスを読んでも全然理解に及びません。1つ目に書いてくださった「定義した変数と関数の引数で受け取った情報は違います。」のidを1として出力結果が2になるのはなぜですか。
m.ts10806

2019/05/27 08:02 編集

2を渡しているからです。 test(2); 関数の引数は「そういう名前でこの関数の中では扱う」という宣言なので、 「関数の引数部分に設定する変数名はなんだっていいのです」と回答に記載しています。 たまたまグローバルに宣言した変数と同じ名前で受け取っているから混乱するだけになるので、 通常は他で使っていない名前を付けます。 なのでサンプルコードでは2回目以降はargidと名称を変更しています。
m.ts10806

2019/05/27 08:05

まあ、あとは色々コードを組んで検証してみると良いです。 今回の質問は答えを伝えるだけなら簡単ですが、「関数」「引数」「戻り値」をきちんと理解していないと 他で同じような場面が出てきたときに対応ができなくなります。 この手のプラグインは「コールバック」といって、機能のある動作のタイミングで指定の情報を返すような機能が備わっていて、様々な対応ができるようになっているので、今回扱い方を覚えておくとかなり有用な知識技術となるはずです。
ems

2019/05/27 08:13 編集

根本的な理解に及んでいませんが、追記4の様に記述したら3番目のスライドの後でdiv要素を非表示させることができました!! 今mts10806さんの上記ご回答を拝読しております…
m.ts10806

2019/05/27 08:14

ひとまず進んだようで何よりです。 「コールバック引数が何を返すか」はプラグインや機能によって違うので、そこはプラグインのマニュアルをきちんと確認して適宜ご対応ください。 英語のマニュアルでもGoogle翻訳にかければ文脈は分かるような簡素な文法で書かれているものが多いですので。
ems

2019/05/27 08:17

なぜ2が出てくるのか、理解できました。 mts10806さん、長い時間詳しく教えて下さり本当にありがとうございました‼今回教えていただいたこと、しっかりおさえていきたいと思います。ありがとうございました。
m.ts10806

2019/05/27 08:18

はい。がんばってください。 ※何かあったら必ずマニュアルに立ち返ってください。 マニュアル・リファレンスが辞書替わり的に使えるようになると一気にステップアップできます
ems

2019/05/27 11:35

※何かあったら必ずマニュアルに立ち返ってください。 マニュアル・リファレンスが辞書替わり的に使えるようになると一気にステップアップできます →はい、わかりました!!ありがとうございます。
guest

0

bxslider は、aria-hidden属性で表示、非表示を判断できる思います。
chromeのデベロッパーツールで、div.aniタグを確認してみてください。
aria-hidden = false が表示
aria-hidden = true が非表示です。
もし、四番目の要素がaria-hidden = falseの場合みたいな

投稿2019/05/27 01:39

SHIVA

総合スコア43

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問