質問編集履歴

4

HTMLを修正しました。

2020/10/04 22:25

投稿

kimisuke553
kimisuke553

スコア11

test CHANGED
File without changes
test CHANGED
@@ -75,8 +75,6 @@
75
75
  </div>
76
76
 
77
77
  <input type="hidden" name="ta" value="WOMEN">
78
-
79
- <div class="season-infut"></div>
80
78
 
81
79
 
82
80
 

3

現状の箇所を変更しました。

2020/10/04 22:25

投稿

kimisuke553
kimisuke553

スコア11

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- 現状、カテゴリー、シーズンの値は1つだけ取り出すことができましたが、
17
+ 現状、カテゴリーの値は1つだけ取り出すことができましたが、
18
18
 
19
19
  2,3のパターンに難航しており、
20
20
 

2

【パターン】について変更をしました。

2020/10/04 22:23

投稿

kimisuke553
kimisuke553

スコア11

test CHANGED
File without changes
test CHANGED
@@ -6,65 +6,81 @@
6
6
 
7
7
  1:カテゴリーに「women」「men」「kids」のボタンがあり、値を1つだけとりだす。
8
8
 
9
- 2:シーズンに「春夏」「秋冬」「全て」のボタンがあり、1つだけりだす。
9
+ 2:シーズンに「春夏」「秋冬」「全て」のボタンがあり、シーズンクリックするカテゴリーで選択した値に
10
10
 
11
- 3:テゴリーのどれかを1選択して、さらにシーズンのどれかを選択しら、
11
+ value="women,春夏"という2つンマでなげい。
12
12
 
13
- その値をvalue="women,春夏"という2つカンマでつなげたい。
14
-
15
- また、全ての値は空にするので、全てをおしたらvalue=""にする。
13
+ 3:シーズンの全ての値は空にするので、全てをおしたらvalue=""にする。
16
14
 
17
15
 
18
16
 
19
17
  現状、カテゴリー、シーズンの値は1つだけ取り出すことができましたが、
20
18
 
19
+ 2,3のパターンに難航しており、
20
+
21
+ カテゴリーを選択してからシーズンを選択するとvalueの値が、「WOMEN,」となり、再度シーズンをクリックすると「undefined,春夏」に
22
+
23
+ なります。
24
+
25
+ 空やundefinedの値が入らないようにするにはどうのような方法がありますでしょうか。
26
+
21
- 3のパターンに難航しており、どのような方法が最適かご教示いただけると幸いです。
27
+ ご教示いただけると幸いです。
22
28
 
23
29
 
24
30
 
25
31
  ```HTML
26
32
 
27
- <div class="menu-search">
33
+ <div class="menu-search">
28
34
 
29
- <!-- ▼▼ カテゴリタブ ▼▼ -->
35
+
30
36
 
31
- <div class="type-tab ta-tag">
37
+ <!-- ▼▼ カテゴリタブ ▼▼ -->
32
38
 
33
- <ul>
39
+ <span class="menu-list-name">カテゴリー</span>
34
40
 
35
- <li data-tag="WOMEN">WOMEN</li>
41
+ <div class="type-tab ta-tag">
36
42
 
37
- <li data-tag="MEN">MEN</li>
43
+ <ul>
38
44
 
39
- <li data-tag="KIDS">KIDS</li>
45
+ <li data-tag="WOMEN">WOMEN</li>
40
46
 
41
- </ul>
47
+ <li data-tag="MEN">MEN</li>
42
48
 
43
- </div>
44
-
45
- <!-- ▼▼ シーズン ▼▼ -->
46
-
47
- <div class="menu-list menu-list_st">
48
-
49
- <div class="menu-list-filter"> <span class="menu-list-name">シーズン</span>
50
-
51
- <ul class="season-tag ta-tag">
52
-
53
- <li data-season-tag="春夏"><span>春夏</span></li>
49
+ <li data-tag="KIDS">KIDS</li>
54
-
55
- <li data-season-tag="秋冬"><span>秋冬</span></li>
56
-
57
- <li data-season-tag=""><span>すべて</span></li>
58
-
59
- <li>
60
50
 
61
51
  </ul>
62
52
 
63
53
  </div>
64
54
 
55
+ <!-- ▼▼ シーズン ▼▼ -->
56
+
57
+ <div class="menu-list menu-list_st">
58
+
59
+ <div class="menu-list-filter">
60
+
61
+ <span class="menu-list-name">シーズン</span>
62
+
63
+ <ul class="season-tag ta-tag">
64
+
65
+ <li data-season-tag="春夏"><span>春夏</span></li>
66
+
67
+ <li data-season-tag="秋冬"><span>秋冬</span></li>
68
+
69
+ <li data-season-tag=""><span>すべて</span></li>
70
+
71
+ </ul>
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ <input type="hidden" name="ta" value="WOMEN">
78
+
79
+ <div class="season-infut"></div>
80
+
81
+
82
+
65
83
  </div>
66
-
67
- </div>
68
84
 
69
85
 
70
86
 
@@ -72,88 +88,100 @@
72
88
 
73
89
  ```javascript
74
90
 
75
- $(function () {
91
+ <script type="text/javascript">
76
92
 
77
- var $category = $('.type-tab li');
93
+ $(function () {
78
94
 
79
- var $season = $('.season-tag li');
95
+ var $category = $('.type-tab li');
80
96
 
81
- var $form = $('.menu-search');
97
+ var $season = $('.season-tag li');
82
98
 
99
+ var $form = $('.menu-search');
100
+
83
- var taValue = [];
101
+ var taValue = [];
84
102
 
85
103
 
86
104
 
87
- // WOMEN,MEN,KIDSの値を配列に格納
105
+ // WOMEN,MEN,KIDSの値を配列に格納
88
106
 
89
- var category = $category.map(function () {
107
+ var category = $category.map(function (){
90
108
 
91
- return $(this).data('tag');
109
+ return $(this).data('tag');
92
110
 
93
- }).toArray();
111
+ }).toArray();
94
112
 
95
- console.log(category);
113
+ console.log(category);
96
114
 
97
115
 
98
116
 
99
- // 春夏,秋冬の値を配列に格納
117
+ // 春夏,秋冬の値を配列に格納
100
118
 
101
- var season = $season.map(function () {
119
+ var season = $season.map(function (){
102
120
 
103
- return $(this).data('season-tag');
121
+ return $(this).data('season-tag');
104
122
 
105
- }).toArray();
123
+ }).toArray();
106
124
 
107
- console.log(season);
125
+ console.log(season);
108
126
 
109
127
 
110
128
 
111
- // categoryのクリック処理
129
+ $('.ta-tag li').on('click', function(){
112
130
 
113
- $category.on('click', function () {
131
+ var categoryTag = $(this).data('tag');
114
132
 
115
- var categoryTag = $(this).data('tag');
133
+ var seasonTag = $(this).data('season-tag');
116
134
 
117
- // クリックした値のみ格納
118
-
119
- var categorySelect = category.filter(function (a) {
120
-
121
- return a === categoryTag;
122
-
123
- });
124
-
125
- console.log(categorySelect);
126
-
127
- $form.find('input[name="ta"]').remove();
135
+ var inputValue = $('input[name="ta"]').val();
128
-
129
- $form.append('<input type="hidden" name="ta" value="' + categorySelect + '" />');
130
-
131
- });
132
136
 
133
137
 
134
138
 
135
- // シーズンのクリック処理
136
139
 
137
- $season.on('click', function () {
138
140
 
139
- var seasonTag = $(this).data('season-tag');
141
+ var categorySelect = category.filter(function(a){
140
142
 
141
- // クリックした値のみ格納
143
+ return a === categoryTag;
142
144
 
143
- var seasonSelect = season.filter(function (a) {
145
+ });
144
146
 
145
- return a === seasonTag;
147
+ var seasonSelect = season.filter(function(a){
146
148
 
147
- });
149
+ return a === seasonTag;
148
150
 
149
- console.log(seasonSelect);
151
+ });
150
152
 
151
- $form.find('input[name="ta"]').remove();
152
153
 
153
- $form.append('<input type="hidden" name="ta" value="' + seasonSelect + '" />');
154
154
 
155
- });
155
+ if(categorySelect){
156
156
 
157
+ $form.find('input[name="ta"]').remove();
158
+
159
+ $form.append('<input type="hidden" name="ta" value="' + categorySelect + '" />');
160
+
161
+ }
162
+
163
+
164
+
165
+ // シーズンのとき
166
+
167
+ if(inputValue != seasonTag){
168
+
169
+ $season.on('click', function(){
170
+
171
+ $form.find('input[name="ta"]').remove();
172
+
173
+ $form.append('<input type="hidden" name="ta" value="' + categoryTag + ',' + seasonSelect + '" />');
174
+
157
- });
175
+ });
176
+
177
+ }
178
+
179
+ });
180
+
181
+
182
+
183
+ });
184
+
185
+ </script>
158
186
 
159
187
  ```

1

2020/10/04 22:22

投稿

kimisuke553
kimisuke553

スコア11

test CHANGED
@@ -1 +1 @@
1
- Jqueryで絞り込みの処理時、inputの値をつなげてapendしたい。
1
+ Jqueryで絞り込みの処理時、inputの値をつなげてappendしたい。
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 実現したい事
2
2
 
3
- 絞り込みの処理で、inputの値をつなげてapendしたい。
3
+ 絞り込みの処理で、inputの値をつなげてappendしたい。
4
4
 
5
5
  【パターン】
6
6