teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コメントへの回答を追記

2020/01/06 13:43

投稿

退会済みユーザー
answer CHANGED
@@ -1,1 +1,24 @@
1
- buttonにdata attributeで`i`に指定する値を設定しておくのが良いかと思います
1
+ buttonにdata attributeで`i`に指定する値を設定しておくのが良いかと思います
2
+
3
+ ---
4
+ コメントへ質問があったので追記
5
+
6
+ 以下のように`data-`に続けて好きな名前をつけたattributeをdata attributeと言います
7
+ ```html
8
+ <button type="button" class="slider_button" data-index="0">
9
+ ```
10
+ この場合`getAttribute('data-index')`とすることで値が取得できます
11
+
12
+ clickイベントでは操作された要素が取得できますので、条件分岐は必要ないかと思います
13
+ ```js
14
+ const length = slide_button.length
15
+ for (let i = 0; i < length; i++) {
16
+ slide_button[i].addEventListener('click', function (event) {
17
+ // event.target が操作された要素
18
+ const clickedButtonIndex = event.target.getAttribute('data-index');
19
+
20
+ // clickedButtonIndex に操作されたボタンの番号(質問文でいう `i` )が入っているので
21
+ // count と合わせて class attribute の変更等をする
22
+ }
23
+ }
24
+ ```