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

質問編集履歴

4

誤字等の修正

2021/10/09 14:12

投稿

yukalino
yukalino

スコア4

title CHANGED
File without changes
body CHANGED
@@ -3,11 +3,7 @@
3
3
  その際、CSVを書き出すときに同じ処理を繰り返し記述しています。
4
4
  この処理をスマートに出来ないでしょうか?
5
5
 
6
- 条件
7
- ・カテゴリ名=slickのIDと同一の文字列
8
- ・ループの部分内のdivのclass指定は各スライダーで同一
9
6
 
10
-
11
7
  ```html
12
8
  <head>
13
9
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
@@ -19,15 +15,15 @@
19
15
  </head>
20
16
 
21
17
  <body>
22
- <div id="aaaa" class="slick_box">
18
+ <div id="slick_1" class="slick_box">
23
19
  <ul class="slider">
24
20
  </ul>
25
21
  </div>
26
- <div id="bbbbb" class="slick_box">
22
+ <div id="slick_2" class="slick_box">
27
23
  <ul class="slider">
28
24
  </ul>
29
25
  </div>
30
- <div id="ccc" class="slick_box">
26
+ <div id="slick_3" class="slick_box">
31
27
  <ul class="slider">
32
28
  </ul>
33
29
  </div>
@@ -56,43 +52,42 @@
56
52
  var insert_2 = '';
57
53
  var insert_3 = '';
58
54
  $(csv).each(function() {
59
- if (this.length > 0 && this[0] === 'aaaa') {
55
+ if (this.length > 0 && this[0] === 'カテゴリ1') {
60
- //ループここから
61
- insert_1 += '<li>';
56
+ // insert_1 += '<li>';
62
- insert_1 += '<div class="ddd">' + this[0] + '</div>';
57
+ insert_1 += '<div>' + this[0] + '</div>';
63
- insert_1 += '<div class="eee">' + this[1] + '</div>';
58
+ insert_1 += '<div>' + this[1] + '</div>';
64
- insert_1 += '<div class="fff">' + this[2] + '</div>';
59
+ insert_1 += '<div>' + this[2] + '</div>';
65
- insert_1 += '<div class="ggg">' + this[3] + '</div>';
60
+ insert_1 += '<div>' + this[3] + '</div>';
66
- insert_1 += '<div class="hhh">' + this[4] + '</div>';
61
+ insert_1 += '<div>' + this[4] + '</div>';
67
- insert_1 += '<div class="iii">' + this[5] + '</div>';
62
+ insert_1 += '<div>' + this[5] + '</div>';
68
63
  insert_1 += '</li>';
69
- //ループここまで
70
- } else if (this.length > 0 && this[0] === 'bbbbb') {
64
+ } else if (this.length > 0 && this[0] === 'カテゴリ2') {
71
65
  insert_2 += '<li>';
72
- insert_2 += '<div class="ddd">' + this[0] + '</div>';
66
+ insert_2 += '<div>' + this[0] + '</div>';
73
- insert_2 += '<div class="eee">' + this[1] + '</div>';
67
+ insert_2 += '<div>' + this[1] + '</div>';
74
- insert_2 += '<div class="fff">' + this[2] + '</div>';
68
+ insert_2 += '<div>' + this[2] + '</div>';
75
- insert_2 += '<div class="ggg">' + this[3] + '</div>';
69
+ insert_2 += '<div>' + this[3] + '</div>';
76
- insert_2 += '<div class="hhh">' + this[4] + '</div>';
70
+ insert_2 += '<div>' + this[4] + '</div>';
77
- insert_2 += '<div class="iii">' + this[5] + '</div>';
71
+ insert_2 += '<div>' + this[5] + '</div>';
78
72
  insert_2 += '</li>';
79
- } else if (this.length > 0 && this[0] === 'ccc') {
73
+ } else if (this.length > 0 && this[0] === 'カテゴリ3') {
80
74
  insert_3 += '<li>';
81
- insert_3 += '<div class="ddd">' + this[0] + '</div>';
75
+ insert_3 += '<div>' + this[0] + '</div>';
82
- insert_3 += '<div class="eee">' + this[1] + '</div>';
76
+ insert_3 += '<div>' + this[1] + '</div>';
83
- insert_3 += '<div class="fff">' + this[2] + '</div>';
77
+ insert_3 += '<div>' + this[2] + '</div>';
84
- insert_3 += '<div class="ggg">' + this[3] + '</div>';
78
+ insert_3 += '<div>' + this[3] + '</div>';
85
- insert_3 += '<div class="hhh">' + this[4] + '</div>';
79
+ insert_3 += '<div>' + this[4] + '</div>';
86
- insert_3 += '<div class="iii">' + this[5] + '</div>';
80
+ insert_3 += '<div>' + this[5] + '</div>';
87
81
  insert_3 += '</li>';
88
82
  } else{
89
83
  return false;
90
84
  }
91
85
  });
92
- $('#aaaa .slider').append(insert_1);
86
+ $('#slick_1 .slider').append(insert_1);
93
- $('#bbbbb .slider').append(insert_2);
87
+ $('#slick_2 .slider').append(insert_2);
94
- $('#ccc .slider').append(insert_3);
88
+ $('#slick_3 .slider').append(insert_3);
95
89
  sliderInit();
90
+
96
91
  }
97
92
  var csvfile = 'data/case_bio.csv';
98
93
  $(function(){
@@ -101,13 +96,13 @@
101
96
  });
102
97
  ```
103
98
  ```csv
104
- aaaa,01,見出し01,ニーズ01,アプローチ01,成果物01
105
- aaaa,02,見出し02,ニーズ02,アプローチ02,成果物02
106
- aaaa,03,見出し03,ニーズ03,アプローチ03,成果物03
107
- bbbbb,01,見出し01,ニーズ01,アプローチ01,成果物01
99
+ カテゴリ1,01,見出し01,ニーズ01,アプローチ01,成果物01
108
- bbbbb,02,見出し02,ニーズ02,アプローチ02,成果物02
100
+ カテゴリ1,02,見出し02,ニーズ02,アプローチ02,成果物02
109
- bbbbb,03,見出し03,ニーズ03,アプローチ03,成果物03
101
+ カテゴリ1,03,見出し03,ニーズ03,アプローチ03,成果物03
110
- ccc,01,見出し01,ニーズ01,アプローチ01,成果物01
102
+ カテゴリ2,01,見出し01,ニーズ01,アプローチ01,成果物01
111
- ccc,02,見出し02,ニーズ02,アプローチ02,成果物02
103
+ カテゴリ2,02,見出し02,ニーズ02,アプローチ02,成果物02
112
- ccc,03,見出し03,ニーズ03,アプローチ03,成果物03
104
+ カテゴリ2,03,見出し03,ニーズ03,アプローチ03,成果物03
105
+ カテゴリ3,01,見出し01,ニーズ01,アプローチ01,成果物01
106
+ カテゴリ3,02,見出し02,ニーズ02,アプローチ02,成果物02
107
+ カテゴリ3,03,見出し03,ニーズ03,アプローチ03,成果物03
113
108
  ```

3

内容が不十分でしたのでjsとcsvの内容を修正しました。

2021/10/09 14:12

投稿

yukalino
yukalino

スコア4

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,11 @@
3
3
  その際、CSVを書き出すときに同じ処理を繰り返し記述しています。
4
4
  この処理をスマートに出来ないでしょうか?
5
5
 
6
+ 条件
7
+ ・カテゴリ名=slickのIDと同一の文字列
8
+ ・ループの部分内のdivのclass指定は各スライダーで同一
9
+
10
+
6
11
  ```html
7
12
  <head>
8
13
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
@@ -14,18 +19,15 @@
14
19
  </head>
15
20
 
16
21
  <body>
17
- <ul class="test">
18
- </ul>
19
-
20
- <div id="slick_1" class="slick_box">
22
+ <div id="aaaa" class="slick_box">
21
23
  <ul class="slider">
22
24
  </ul>
23
25
  </div>
24
- <div id="slick_2" class="slick_box">
26
+ <div id="bbbbb" class="slick_box">
25
27
  <ul class="slider">
26
28
  </ul>
27
29
  </div>
28
- <div id="slick_3" class="slick_box">
30
+ <div id="ccc" class="slick_box">
29
31
  <ul class="slider">
30
32
  </ul>
31
33
  </div>
@@ -54,40 +56,42 @@
54
56
  var insert_2 = '';
55
57
  var insert_3 = '';
56
58
  $(csv).each(function() {
57
- if (this.length > 0 && this[0] === 'カテゴリ1') {
59
+ if (this.length > 0 && this[0] === 'aaaa') {
60
+ //ループここから
58
61
  insert_1 += '<li>';
59
- insert_1 += '<div>' + this[0] + '</div>';
62
+ insert_1 += '<div class="ddd">' + this[0] + '</div>';
60
- insert_1 += '<div>' + this[1] + '</div>';
63
+ insert_1 += '<div class="eee">' + this[1] + '</div>';
61
- insert_1 += '<div>' + this[2] + '</div>';
64
+ insert_1 += '<div class="fff">' + this[2] + '</div>';
62
- insert_1 += '<div>' + this[3] + '</div>';
65
+ insert_1 += '<div class="ggg">' + this[3] + '</div>';
63
- insert_1 += '<div>' + this[4] + '</div>';
66
+ insert_1 += '<div class="hhh">' + this[4] + '</div>';
64
- insert_1 += '<div>' + this[5] + '</div>';
67
+ insert_1 += '<div class="iii">' + this[5] + '</div>';
65
68
  insert_1 += '</li>';
69
+ //ループここまで
66
- } else if (this.length > 0 && this[0] === 'カテゴリ2') {
70
+ } else if (this.length > 0 && this[0] === 'bbbbb') {
67
71
  insert_2 += '<li>';
68
- insert_2 += '<div>' + this[0] + '</div>';
72
+ insert_2 += '<div class="ddd">' + this[0] + '</div>';
69
- insert_2 += '<div>' + this[1] + '</div>';
73
+ insert_2 += '<div class="eee">' + this[1] + '</div>';
70
- insert_2 += '<div>' + this[2] + '</div>';
74
+ insert_2 += '<div class="fff">' + this[2] + '</div>';
71
- insert_2 += '<div>' + this[3] + '</div>';
75
+ insert_2 += '<div class="ggg">' + this[3] + '</div>';
72
- insert_2 += '<div>' + this[4] + '</div>';
76
+ insert_2 += '<div class="hhh">' + this[4] + '</div>';
73
- insert_2 += '<div>' + this[5] + '</div>';
77
+ insert_2 += '<div class="iii">' + this[5] + '</div>';
74
78
  insert_2 += '</li>';
75
- } else if (this.length > 0 && this[0] === 'カテゴリ3') {
79
+ } else if (this.length > 0 && this[0] === 'ccc') {
76
80
  insert_3 += '<li>';
77
- insert_3 += '<div>' + this[0] + '</div>';
81
+ insert_3 += '<div class="ddd">' + this[0] + '</div>';
78
- insert_3 += '<div>' + this[1] + '</div>';
82
+ insert_3 += '<div class="eee">' + this[1] + '</div>';
79
- insert_3 += '<div>' + this[2] + '</div>';
83
+ insert_3 += '<div class="fff">' + this[2] + '</div>';
80
- insert_3 += '<div>' + this[3] + '</div>';
84
+ insert_3 += '<div class="ggg">' + this[3] + '</div>';
81
- insert_3 += '<div>' + this[4] + '</div>';
85
+ insert_3 += '<div class="hhh">' + this[4] + '</div>';
82
- insert_3 += '<div>' + this[5] + '</div>';
86
+ insert_3 += '<div class="iii">' + this[5] + '</div>';
83
87
  insert_3 += '</li>';
84
88
  } else{
85
89
  return false;
86
90
  }
87
91
  });
88
- $('#slick_1 .slider').append(insert_1);
92
+ $('#aaaa .slider').append(insert_1);
89
- $('#slick_2 .slider').append(insert_2);
93
+ $('#bbbbb .slider').append(insert_2);
90
- $('#slick_3 .slider').append(insert_3);
94
+ $('#ccc .slider').append(insert_3);
91
95
  sliderInit();
92
96
  }
93
97
  var csvfile = 'data/case_bio.csv';
@@ -97,13 +101,13 @@
97
101
  });
98
102
  ```
99
103
  ```csv
104
+ aaaa,01,見出し01,ニーズ01,アプローチ01,成果物01
105
+ aaaa,02,見出し02,ニーズ02,アプローチ02,成果物02
106
+ aaaa,03,見出し03,ニーズ03,アプローチ03,成果物03
100
- カテゴリ1,01,見出し01,ニーズ01,アプローチ01,成果物01
107
+ bbbbb,01,見出し01,ニーズ01,アプローチ01,成果物01
101
- カテゴリ1,02,見出し02,ニーズ02,アプローチ02,成果物02
108
+ bbbbb,02,見出し02,ニーズ02,アプローチ02,成果物02
102
- カテゴリ1,03,見出し03,ニーズ03,アプローチ03,成果物03
109
+ bbbbb,03,見出し03,ニーズ03,アプローチ03,成果物03
103
- カテゴリ2,01,見出し01,ニーズ01,アプローチ01,成果物01
110
+ ccc,01,見出し01,ニーズ01,アプローチ01,成果物01
104
- カテゴリ2,02,見出し02,ニーズ02,アプローチ02,成果物02
111
+ ccc,02,見出し02,ニーズ02,アプローチ02,成果物02
105
- カテゴリ2,03,見出し03,ニーズ03,アプローチ03,成果物03
112
+ ccc,03,見出し03,ニーズ03,アプローチ03,成果物03
106
- カテゴリ3,01,見出し01,ニーズ01,アプローチ01,成果物01
107
- カテゴリ3,02,見出し02,ニーズ02,アプローチ02,成果物02
108
- カテゴリ3,03,見出し03,ニーズ03,アプローチ03,成果物03
109
113
  ```

2

CSSの記述が抜けておりましたので追記しています。

2021/10/09 05:26

投稿

yukalino
yukalino

スコア4

title CHANGED
File without changes
body CHANGED
@@ -5,6 +5,9 @@
5
5
 
6
6
  ```html
7
7
  <head>
8
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
10
+
8
11
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
9
12
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
10
13
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>

1

html部分にjqueryのプラグインの記述を追加しました。

2021/10/08 00:28

投稿

yukalino
yukalino

スコア4

title CHANGED
File without changes
body CHANGED
@@ -4,6 +4,12 @@
4
4
  この処理をスマートに出来ないでしょうか?
5
5
 
6
6
  ```html
7
+ <head>
8
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
9
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
10
+ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>
11
+ </head>
12
+
7
13
  <body>
8
14
  <ul class="test">
9
15
  </ul>