回答編集履歴
1
追記
answer
CHANGED
|
@@ -39,4 +39,29 @@
|
|
|
39
39
|
targets[i].classList.add("show")
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
+
```
|
|
43
|
+
追記
|
|
44
|
+
---
|
|
45
|
+
コメントで、下記の仕様が追加されましたので書き換えました。
|
|
46
|
+
- 「前へ」、「次へ」ボタン
|
|
47
|
+
- 次へを押して終わりなら、最初に戻す。
|
|
48
|
+
- 前へを押して終わりなら、最後に戻す。
|
|
49
|
+
|
|
50
|
+
```js
|
|
51
|
+
let i = -1;
|
|
52
|
+
let targets = document.querySelectorAll('.texts > p');
|
|
53
|
+
|
|
54
|
+
document.getElementById("back-btn").onclick = function() {
|
|
55
|
+
i <= 0 ? i=targets.length - 1 : i--;
|
|
56
|
+
setShow(i);
|
|
57
|
+
}
|
|
58
|
+
document.getElementById("next-btn").onclick = function() {
|
|
59
|
+
i >= targets.length - 1 ? i=0 : i++;
|
|
60
|
+
setShow(i);
|
|
61
|
+
}
|
|
62
|
+
function setShow(i) {
|
|
63
|
+
let el = document.querySelector('p.show');
|
|
64
|
+
if(el){el.classList.remove("show")};
|
|
65
|
+
targets[i].classList.add("show");
|
|
66
|
+
}
|
|
42
67
|
```
|