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

前提・実現したいこと

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

行動規範の内容に同意します

回答2件

こういう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_pudding

総合スコア9528

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

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

行動規範の内容に同意します

あなたの回答