teratail
回答率
85.48%
質問するログイン新規登録
トップWebサイトに関する質問sliderを複数追加、削除ボタンしたい。

編集履歴

回答編集履歴

1

個別で指定する方式に変更

2021/11/25 02:07

投稿

k_a
k_a

スコア983

test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  - スタイルを個別で指定するのは冗長です
6
6
 
7
- - sliderを個別で設定するのは冗長です
7
+ - ~~sliderを個別で設定するのは冗長です~~
8
8
 
9
9
 
10
10
 
@@ -52,21 +52,21 @@
52
52
 
53
53
  <div class='sliderContainer'>
54
54
 
55
+ <div>
56
+
55
- <div class="slider">
57
+ <div class="slider slider1"></div>
56
-
57
- <div></div>
58
58
 
59
59
  </div>
60
60
 
61
+ <div>
62
+
61
- <div class="slider">
63
+ <div class="slider slider2"></div>
62
-
63
- <div></div>
64
64
 
65
65
  </div>
66
66
 
67
+ <div>
68
+
67
- <div class="slider">
69
+ <div class="slider slider3"></div>
68
-
69
- <div></div>
70
70
 
71
71
  </div>
72
72
 
@@ -84,14 +84,42 @@
84
84
 
85
85
  //スライダ設定関数
86
86
 
87
- function setSlider(target) {
87
+ function setSliderGroup(target) {
88
-
88
+
89
- $(target).children('div:first').slider({
89
+ $(target).find('.slider1').slider({
90
90
 
91
91
  max: 254, //最大値
92
92
 
93
93
  min: 1, //最小値
94
94
 
95
+ value: 100, //初期値
96
+
97
+ step: 1, //幅
98
+
99
+ })
100
+
101
+
102
+
103
+ $(target).find('.slider2').slider({
104
+
105
+ max: 254, //最大値
106
+
107
+ min: 1, //最小値
108
+
109
+ value: 200, //初期値
110
+
111
+ step: 1, //幅
112
+
113
+ })
114
+
115
+
116
+
117
+ $(target).find('.slider3').slider({
118
+
119
+ max: 254, //最大値
120
+
121
+ min: 1, //最小値
122
+
95
123
  value: 50, //初期値
96
124
 
97
125
  step: 1, //幅
@@ -104,80 +132,66 @@
104
132
 
105
133
  //スライダを設定
106
134
 
135
+ setSliderGroup($(".sliderContainer"))
136
+
137
+
138
+
139
+ //追加ボタン
140
+
141
+ $('#tsuika').on('click', function() {
142
+
143
+ const elements = document.getElementById("target");
144
+
145
+ const copied = elements.lastElementChild.cloneNode(true);
146
+
147
+ //追加要素にスライダを設定
148
+
149
+ setSliderGroup($(copied))
150
+
151
+ elements.appendChild(copied);
152
+
153
+ })
154
+
155
+
156
+
157
+ //削除ボタン
158
+
107
- $(".slider").each(function() {
159
+ $("#sakujo").on("click", function() {
160
+
108
-
161
+ const elements = document.getElementById("target");
162
+
163
+ //スライダ郡が一つだけだったら何もしない
164
+
165
+ if ($(elements).children().length == 1) return
166
+
109
- setSlider(this)
167
+ elements.lastElementChild.remove();
110
168
 
111
169
  });
112
170
 
113
171
 
114
172
 
115
- //追加ボタン
116
-
117
- $('#tsuika').on('click', function addExample() {
118
-
119
- const elements = document.getElementById("target");
120
-
121
- const copied = elements.lastElementChild.cloneNode(true);
122
-
123
-
124
-
125
- //追加要素にスライダを設定
126
-
127
- $(copied).children().each(function() {
128
-
129
- setSlider(this)
130
-
131
- });
132
-
133
-
134
-
135
- elements.appendChild(copied);
136
-
137
- })
138
-
139
-
140
-
141
- //削除ボタン
142
-
143
- $("#sakujo").on("click", function() {
144
-
145
- const elements = document.getElementById("target");
146
-
147
- //スライダ郡が一つだけだったら何もしない
148
-
149
- if ($(elements).children().length == 1) return
150
-
151
-
152
-
153
- elements.lastElementChild.remove();
154
-
155
- });
156
-
157
-
158
-
159
173
  </script>
160
174
 
161
175
 
162
176
 
163
177
  <style>
164
178
 
179
+ .sliderContainer>div {
180
+
181
+ padding: 5px 25px;
182
+
183
+ }
184
+
185
+
186
+
165
187
  .slider {
166
188
 
167
- padding: 5px 25px;
189
+ width: 350px;
168
190
 
169
191
  }
170
192
 
171
193
 
172
194
 
173
- .slider>div {
174
-
175
- width: 350px;
176
-
177
- }
178
-
179
-
180
-
181
195
  </style>
182
196
 
183
197
 
@@ -186,6 +200,4 @@
186
200
 
187
201
 
188
202
 
189
-
190
-
191
203
  ```