🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
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回答

1176閲覧

JavaScriptを使ったスライドの作成

beginner_2019

総合スコア6

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クリップ

投稿2020/01/05 12:43

編集2020/01/05 13:01

前提・実現したいこと

JavaScriptを使ったスライドの作成。
丸ボタンを押したときに任意のスライドに変更するために、押されたボタンのslide_button[i]のiを取得する方法を知りたい。
また、代替案またはアドバイスをいただきたい。

丸ボタンを押したときにslide_button[i]のiを取得して、

JavaScript

1slide_button[i].addEventListener('click',function(){) 2 var b = count; 3 count = i; 4 element[b].classList.remove('slider_change'); 5 slide_button[b].classList.remove('button_change'); 6 element[count].classList.add('slider_change'); 7 slide_button[count].classList.add('button_change'); 8});

上記で丸ボタンを押したときに、任意の色にスライドを変更をしようと考えています。

該当のソースコード

JavaScript

1window.onload = function(){ 2 var element = document.getElementsByClassName('slider_element'); 3 var slide_button = document.getElementsByClassName('slider_button')4 let count = 0; 5 6 function change(){ 7 if(count == 5){ 8 element[count - 1].classList.remove('slider_change'); 9 slide_button[count - 1].classList.remove('button_change'); 10 count = 0; 11 element[count].classList.add('slider_change'); 12 slide_button[count].classList.add('button_change'); 13 }else{ 14 if(count != 0){ 15 element[count - 1].classList.remove('slider_change'); 16 slide_button[count - 1].classList.remove('button_change'); 17 } 18 element[count].classList.add('slider_change'); 19 slide_button[count].classList.add('button_change'); 20 } 21 count++; 22 setTimeout(change,2000); 23 } 24 25 change(); 26} 27

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="./css/reset.css"> 6 <link rel="stylesheet" href="./css/slider_style.css"> 7 <title></title> 8 </head> 9 <body> 10 <div class="slider"> 11 <div class="slider_inner"> 12 <ul class="slider_elements"> 13 <li class="slider_element slider_change"> 14 <p style="background-color:#000;"></p> 15 </li> 16 <li class="slider_element"> 17 <p style="background-color:#f00;"></p> 18 </li> 19 <li class="slider_element"> 20 <p style="background-color:#0f0;"></p> 21 </li> 22 <li class="slider_element"> 23 <p style="background-color:#00f;"></p> 24 </li> 25 <li class="slider_element"> 26 <p style="background-color:#fff;"></p> 27 </li> 28 </ul> 29 <ul class="slider_button_area"> 30 <li> 31 <button type="button" class="slider_button button_change"></button> 32 </li> 33 <li> 34 <button type="button" class="slider_button"></button> 35 </li> 36 <li> 37 <button type="button" class="slider_button"></button> 38 </li> 39 <li> 40 <button type="button" class="slider_button"></button> 41 </li> 42 <li> 43 <button type="button" class="slider_button"></button> 44 </li> 45 </ul> 46 </div> 47 </div> 48 <script src="./js/slider.js"></script> 49 </body> 50</html>

CSS

1ul{ 2 list-style: none; 3} 4 5.slider{ 6 width: 100%; 7 height: 450px; 8 margin: 0 auto; 9} 10 11.slider_inner{ 12 width: 1500px; 13 height: 450px; 14 position: relative; 15 margin: 0 auto; 16} 17 18.slider_elements{ 19 width: 1500px; 20 height: 450px; 21 position: relative; 22} 23 24.slider_element{ 25 transition: 1s; 26 position: absolute; 27 opacity: 0; 28} 29 30.slider_element p{ 31 width: 1500px; 32 height: 450px; 33} 34 35.slider_change{ 36 transition: 1s; 37 opacity: 1; 38} 39 40 41 42.slider_button_area{ 43 width: 100%; 44 height: auto; 45 position: absolute; 46 bottom: 30px; 47 display: flex; 48 justify-content: center; 49 left: 50%; 50 margin-left: -750px; 51} 52 53.slider_button{ 54 width: 30px; 55 height: 30px; 56 background-color: #077; 57 border-radius: 50%; 58 margin:0 10px; 59 border-style: none; 60 outline: none; 61} 62 63.button_change{ 64 background-color: #770; 65} 66

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

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

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

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

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

guest

回答2

0

こういうHTMLCollection系の走査やるんだったら、jQuery使った方がいいかと思いますが。
バニラでも、いくつか方法があります。
その中でもES6以降で使用可能な、Array.fromを使う方法です。

javascript

1// slide_button(HTMLCollection)を一発で走査する 2[].from(slide_button, (e, i) => { 3 // 走査された要素に対してクリックイベントを付与 4 e.addEventListener('click', function(){ // ここに余計な")"がいた 5 var b = count; 6 count = i; 7 element[b].classList.remove('slider_change'); 8 slide_button[b].classList.remove('button_change'); 9 element[count].classList.add('slider_change'); 10 slide_button[count].classList.add('button_change'); 11 }); 12 13 // 第二引数で実行されるのは、Array.mapなので、一応値を返しとく(なくても動くかも) 14 return e; 15});

Array.fromは、配列っぽいオブジェクトに対して、Array.mapを一発で実行できるという、超便利なメソッドです。
これにより、jQueryと似た感覚で、HTMLCollectionのコントロールができたりします。
また、質問の構文の)がおかしな位置にあったので、それも修正してます。

投稿2020/01/06 01:52

miyabi_takatsuk

総合スコア9555

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

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

0

buttonにdata attributeでiに指定する値を設定しておくのが良いかと思います


コメントへ質問があったので追記

以下のようにdata-に続けて好きな名前をつけたattributeをdata attributeと言います

html

1<button type="button" class="slider_button" data-index="0">

この場合getAttribute('data-index')とすることで値が取得できます

clickイベントでは操作された要素が取得できますので、条件分岐は必要ないかと思います

js

1const length = slide_button.length 2for (let i = 0; i < length; i++) { 3 slide_button[i].addEventListener('click', function (event) { 4 // event.target が操作された要素 5 const clickedButtonIndex = event.target.getAttribute('data-index'); 6 7 // clickedButtonIndex に操作されたボタンの番号(質問文でいう `i` )が入っているので 8 // count と合わせて class attribute の変更等をする 9 } 10}

投稿2020/01/05 12:57

編集2020/01/06 13:43
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

beginner_2019

2020/01/05 13:33

ご回答ありがとうございます。 buttonタグにdataをつけて、var i = 要素.getAttribute('data');で取得するということでしょうか? この場合、任意のボタンを押したときに上記を実行するときにはどうしたらいいのでしょうか? slide_button[0].addEventListener('click',function(){ var i = slide_button[0].getAttribute('data'); }) slide_button[1].addEventListener('click',function(){ var i = slide_button[1].getAttribute('data'); }) みたいに、場合分けする感じでしょうか? プログラミング自体触って間もないため、理解力が乏しくて申し訳ありません。 間違っていましたら指摘していただけたらと思います。 よろしくお願いします。
退会済みユーザー

退会済みユーザー

2020/01/06 13:44

こちらではコードが読みにくいため回答を編集しました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問