回答編集履歴
1
個別で指定する方式に変更
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
- 追加は囲んだdiv毎なのに削除はslider単体ずつ行っているので、差異のdiv分空白が生まれています
|
|
2
2
|
- 追加分にsliderが設定されていません
|
|
3
3
|
- スタイルを個別で指定するのは冗長です
|
|
4
|
-
- sliderを個別で設定するのは冗長です
|
|
4
|
+
- ~~sliderを個別で設定するのは冗長です~~
|
|
5
5
|
|
|
6
6
|
上記改善点を含めたコード案です。
|
|
7
7
|
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
<body>
|
|
26
26
|
<div id="target">
|
|
27
27
|
<div class='sliderContainer'>
|
|
28
|
+
<div>
|
|
28
|
-
|
|
29
|
+
<div class="slider slider1"></div>
|
|
29
|
-
<div></div>
|
|
30
30
|
</div>
|
|
31
|
+
<div>
|
|
31
|
-
|
|
32
|
+
<div class="slider slider2"></div>
|
|
32
|
-
<div></div>
|
|
33
33
|
</div>
|
|
34
|
+
<div>
|
|
34
|
-
|
|
35
|
+
<div class="slider slider3"></div>
|
|
35
|
-
<div></div>
|
|
36
36
|
</div>
|
|
37
37
|
</div>
|
|
38
38
|
</div>
|
|
@@ -41,30 +41,38 @@
|
|
|
41
41
|
</body>
|
|
42
42
|
<script>
|
|
43
43
|
//スライダ設定関数
|
|
44
|
-
function
|
|
44
|
+
function setSliderGroup(target) {
|
|
45
|
-
$(target).
|
|
45
|
+
$(target).find('.slider1').slider({
|
|
46
46
|
max: 254, //最大値
|
|
47
47
|
min: 1, //最小値
|
|
48
|
+
value: 100, //初期値
|
|
49
|
+
step: 1, //幅
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
$(target).find('.slider2').slider({
|
|
53
|
+
max: 254, //最大値
|
|
54
|
+
min: 1, //最小値
|
|
55
|
+
value: 200, //初期値
|
|
56
|
+
step: 1, //幅
|
|
57
|
+
})
|
|
58
|
+
|
|
59
|
+
$(target).find('.slider3').slider({
|
|
60
|
+
max: 254, //最大値
|
|
61
|
+
min: 1, //最小値
|
|
48
62
|
value: 50, //初期値
|
|
49
63
|
step: 1, //幅
|
|
50
64
|
})
|
|
51
65
|
}
|
|
52
66
|
|
|
53
67
|
//スライダを設定
|
|
54
|
-
$(".
|
|
68
|
+
setSliderGroup($(".sliderContainer"))
|
|
55
|
-
setSlider(this)
|
|
56
|
-
});
|
|
57
69
|
|
|
58
70
|
//追加ボタン
|
|
59
|
-
$('#tsuika').on('click', function
|
|
71
|
+
$('#tsuika').on('click', function() {
|
|
60
72
|
const elements = document.getElementById("target");
|
|
61
73
|
const copied = elements.lastElementChild.cloneNode(true);
|
|
62
|
-
|
|
63
74
|
//追加要素にスライダを設定
|
|
64
|
-
$(copied).children().each(function() {
|
|
65
|
-
|
|
75
|
+
setSliderGroup($(copied))
|
|
66
|
-
});
|
|
67
|
-
|
|
68
76
|
elements.appendChild(copied);
|
|
69
77
|
})
|
|
70
78
|
|
|
@@ -73,18 +81,17 @@
|
|
|
73
81
|
const elements = document.getElementById("target");
|
|
74
82
|
//スライダ郡が一つだけだったら何もしない
|
|
75
83
|
if ($(elements).children().length == 1) return
|
|
76
|
-
|
|
77
84
|
elements.lastElementChild.remove();
|
|
78
85
|
});
|
|
79
86
|
|
|
80
87
|
</script>
|
|
81
88
|
|
|
82
89
|
<style>
|
|
83
|
-
.
|
|
90
|
+
.sliderContainer>div {
|
|
84
91
|
padding: 5px 25px;
|
|
85
92
|
}
|
|
86
93
|
|
|
87
|
-
.slider
|
|
94
|
+
.slider {
|
|
88
95
|
width: 350px;
|
|
89
96
|
}
|
|
90
97
|
|
|
@@ -92,5 +99,4 @@
|
|
|
92
99
|
|
|
93
100
|
</html>
|
|
94
101
|
|
|
95
|
-
|
|
96
102
|
```
|