回答編集履歴
1
1話 or 0話 - end話までの要素を追加するコードに変更
test
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
`jquery`を使って下記のようなコードでいかがでしょうか。
|
|
1
|
+
`jquery`を使って下記のようなコードでいかがでしょうか。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
1話 or 0話 - end話までの`ul > (li * end)`要素を追加するコードに変更しました。また、チェックボックスで`li`要素を自動更新するようにしています。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -10,33 +10,87 @@
|
|
|
10
10
|
|
|
11
11
|
$(function() {
|
|
12
12
|
|
|
13
|
-
$('#anime input
|
|
13
|
+
var $episodeGroup = $('#anime .input-group-addon').eq(1); //〇話DIV要素
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
var $inputEepisode = $('#anime input[name="wa"]'); //話数のTEXT
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
var $zeroStart = $('#anime input[name="zero"]'); //ゼロスタートのCHECKBOX
|
|
18
18
|
|
|
19
|
-
$current.text($elem.val() + '話').data('current', $elem.val());
|
|
20
19
|
|
|
21
|
-
//コンソールに表示
|
|
22
20
|
|
|
23
|
-
|
|
21
|
+
var createEpisodeElem = function (start, end) {
|
|
24
22
|
|
|
25
|
-
|
|
23
|
+
var episodes = '';
|
|
26
24
|
|
|
27
|
-
.on('change', function (e) {
|
|
28
25
|
|
|
29
|
-
var $elem = $(e.target); //input要素
|
|
30
26
|
|
|
31
|
-
|
|
27
|
+
if (start === undefined) start = 1;
|
|
32
28
|
|
|
33
|
-
|
|
29
|
+
if (end === undefined) return '';
|
|
34
30
|
|
|
35
|
-
$total.text('全'+ (total + 1) +'話').data('total', (total + 1));
|
|
36
31
|
|
|
37
|
-
//コンソールに表示
|
|
38
32
|
|
|
33
|
+
if ($('#anime input[name="zero"]').is(':checked')) {
|
|
34
|
+
|
|
35
|
+
start = 0;
|
|
36
|
+
|
|
37
|
+
end--;
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
for (var i = start; i <= end; i++) {
|
|
44
|
+
|
|
45
|
+
episodes += '<li data-episode="'+ i +'">'+ i +'話</li>';
|
|
46
|
+
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
return episodes;
|
|
52
|
+
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
var updateEpisodeElem = function (start, end) {
|
|
58
|
+
|
|
59
|
+
if (start === undefined) start = 1;
|
|
60
|
+
|
|
61
|
+
if (end === undefined) return false; else end = parseInt(end);
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
if (end > 0) {
|
|
66
|
+
|
|
67
|
+
$episodeGroup.empty().append('<ul>'+ createEpisodeElem(start, end) +'</ul>');
|
|
68
|
+
|
|
69
|
+
return true;
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
return false;
|
|
76
|
+
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
//話数記入でli要素を追加
|
|
82
|
+
|
|
83
|
+
$inputEepisode.on('input paste', function (e) {
|
|
84
|
+
|
|
39
|
-
|
|
85
|
+
updateEpisodeElem(1, $(e.target).val());
|
|
86
|
+
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
//ゼロ話スタートチェックでli要素を更新
|
|
90
|
+
|
|
91
|
+
$zeroStart.on('change', function () {
|
|
92
|
+
|
|
93
|
+
updateEpisodeElem(1, $('#anime input[name="wa"]').val());
|
|
40
94
|
|
|
41
95
|
});
|
|
42
96
|
|
|
@@ -46,12 +100,14 @@
|
|
|
46
100
|
|
|
47
101
|
|
|
48
102
|
|
|
49
|
-
HTMLの属性に`min`・`max`を設定すれば、最小値・最大値を決められます。
|
|
103
|
+
HTMLの属性に`min`・`max`を設定すれば、最小値・最大値を決められますので、下記のように「min="1"」を追加しておきます。
|
|
50
104
|
|
|
51
105
|
|
|
52
106
|
|
|
53
107
|
```html
|
|
54
108
|
|
|
55
|
-
<input type="number" class="form-control" name="wa" min="
|
|
109
|
+
<input type="number" class="form-control" name="wa" min="1" placeholder="話数">
|
|
56
110
|
|
|
57
111
|
```
|
|
112
|
+
|
|
113
|
+
|