teratail
回答率
85.29%
質問するログイン新規登録
トップに関する質問Jqueryで絞り込みの処理時、inputの値をつなげてappendしたい。

編集履歴

質問編集履歴

4

HTMLを修正しました。

2020/10/04 22:25

投稿

kimisuke553
kimisuke553

スコア11

title CHANGED
File without changes
body CHANGED
@@ -37,7 +37,6 @@
37
37
  </div>
38
38
  </div>
39
39
  <input type="hidden" name="ta" value="WOMEN">
40
- <div class="season-infut"></div>
41
40
 
42
41
  </div>
43
42
 

3

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

2020/10/04 22:25

投稿

kimisuke553
kimisuke553

スコア11

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  value="women,春夏"という２つカンマでつなげたい。
7
7
  3:シーズンの全ての値は空にするので、全てをおしたらvalue=""にする。
8
8
 
9
- 現状、カテゴリー、シーズンの値は１つだけ取り出すことができましたが、
9
+ 現状、カテゴリーの値は１つだけ取り出すことができましたが、
10
10
  2,3のパターンに難航しており、
11
11
  カテゴリーを選択してからシーズンを選択するとvalueの値が、「WOMEN,」となり、再度シーズンをクリックすると「undefined,春夏」に
12
12
  なります。

2

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

2020/10/04 22:23

投稿

kimisuke553
kimisuke553

スコア11

title CHANGED
File without changes
body CHANGED
@@ -2,79 +2,93 @@
2
2
  絞り込みの処理で、inputの値をつなげてappendしたい。
3
3
  【パターン】
4
4
  1:カテゴリーに「women」「men」「kids」のボタンがあり、値を1つだけとりだす。
5
- 2:シーズンに「春夏」「秋冬」「全て」のボタンがあり、値を1つだけとりだす。
5
+ 2:シーズンに「春夏」「秋冬」「全て」のボタンがあり、シーズンをクリックするとカテゴリーで選択した値に
6
- 3:カテゴリーのどれかを１つ選択して、さらにシーズンのどれかを選択したら、
7
- その値をvalue="women,春夏"という２つカンマでつなげたい。
6
+ value="women,春夏"という２つカンマでつなげたい。
8
- また、全ての値は空にするので、全てをおしたらvalue=""にする。
7
+ 3:シーズンの全ての値は空にするので、全てをおしたらvalue=""にする。
9
8
 
10
9
  現状、カテゴリー、シーズンの値は１つだけ取り出すことができましたが、
10
+ 2,3のパターンに難航しており、
11
+ カテゴリーを選択してからシーズンを選択するとvalueの値が、「WOMEN,」となり、再度シーズンをクリックすると「undefined,春夏」に
12
+ なります。
13
+ 空やundefinedの値が入らないようにするにはどうのような方法がありますでしょうか。
11
- 3のパターンに難航しており、どのような方法が最適かご教示いただけると幸いです。
14
+ ご教示いただけると幸いです。
12
15
 
13
16
  ```HTML
14
- <div class="menu-search">
17
+ <div class="menu-search">
18
+
15
- <!-- ▼▼　カテゴリタブ　▼▼ -->
19
+ <!-- ▼▼　カテゴリタブ　▼▼ -->
20
+ <span class="menu-list-name">カテゴリー</span>
16
- <div class="type-tab ta-tag">
21
+ <div class="type-tab ta-tag">
17
- <ul>
22
+ <ul>
18
- <li data-tag="WOMEN">WOMEN</li>
23
+ <li data-tag="WOMEN">WOMEN</li>
19
- <li data-tag="MEN">MEN</li>
24
+ <li data-tag="MEN">MEN</li>
20
- <li data-tag="KIDS">KIDS</li>
25
+ <li data-tag="KIDS">KIDS</li>
21
- </ul>
22
- </div>
23
- <!-- ▼▼　シーズン　▼▼ -->
24
- <div class="menu-list menu-list_st">
25
- <div class="menu-list-filter"> <span class="menu-list-name">シーズン</span>
26
- <ul class="season-tag ta-tag">
27
- <li data-season-tag="春夏"><span>春夏</span></li>
28
- <li data-season-tag="秋冬"><span>秋冬</span></li>
29
- <li data-season-tag=""><span>すべて</span></li>
30
- <li>
31
26
  </ul>
32
27
  </div>
28
+ <!-- ▼▼　シーズン　▼▼ -->
29
+ <div class="menu-list menu-list_st">
30
+ <div class="menu-list-filter">
31
+ <span class="menu-list-name">シーズン</span>
32
+ <ul class="season-tag ta-tag">
33
+ <li data-season-tag="春夏"><span>春夏</span></li>
34
+ <li data-season-tag="秋冬"><span>秋冬</span></li>
35
+ <li data-season-tag=""><span>すべて</span></li>
36
+ </ul>
37
+ </div>
38
+ </div>
39
+ <input type="hidden" name="ta" value="WOMEN">
40
+ <div class="season-infut"></div>
41
+
33
42
  </div>
34
- </div>
35
43
 
36
44
  ```
37
45
  ```javascript
46
+ <script type="text/javascript">
38
- $(function () {
47
+ $(function () {
39
- var $category = $('.type-tab li');
48
+ var $category = $('.type-tab li');
40
- var $season = $('.season-tag li');
49
+ var $season = $('.season-tag li');
41
- var $form = $('.menu-search');
50
+ var $form = $('.menu-search');
42
- var taValue = [];
51
+ var taValue = [];
43
52
 
44
- // WOMEN,MEN,KIDSの値を配列に格納
53
+ // WOMEN,MEN,KIDSの値を配列に格納
45
- var category = $category.map(function () {
54
+ var category = $category.map(function (){
46
- return $(this).data('tag');
55
+ return $(this).data('tag');
47
- }).toArray();
56
+ }).toArray();
48
- console.log(category);
57
+ console.log(category);
49
58
 
50
- // 春夏,秋冬の値を配列に格納
59
+ // 春夏,秋冬の値を配列に格納
51
- var season = $season.map(function () {
60
+ var season = $season.map(function (){
52
- return $(this).data('season-tag');
61
+ return $(this).data('season-tag');
53
- }).toArray();
62
+ }).toArray();
54
- console.log(season);
63
+ console.log(season);
55
64
 
56
- // categoryのクリック処理
57
- $category.on('click', function () {
65
+ $('.ta-tag li').on('click', function(){
58
- var categoryTag = $(this).data('tag');
66
+ var categoryTag = $(this).data('tag');
59
- // クリックした値のみ格納
60
- var categorySelect = category.filter(function (a) {
67
+ var seasonTag = $(this).data('season-tag');
61
- return a === categoryTag;
62
- });
63
- console.log(categorySelect);
64
- $form.find('input[name="ta"]').remove();
68
+ var inputValue = $('input[name="ta"]').val();
65
- $form.append('<input type="hidden" name="ta" value="' + categorySelect + '" />');
66
- });
67
69
 
68
- // シーズンのクリック処理
70
+
69
- $season.on('click', function () {
71
+ var categorySelect = category.filter(function(a){
70
- var seasonTag = $(this).data('season-tag');
71
- // クリックした値のみ格納
72
+ return a === categoryTag;
73
+ });
72
- var seasonSelect = season.filter(function (a) {
74
+ var seasonSelect = season.filter(function(a){
73
- return a === seasonTag;
75
+ return a === seasonTag;
74
- });
76
+ });
77
+
75
- console.log(seasonSelect);
78
+ if(categorySelect){
76
- $form.find('input[name="ta"]').remove();
79
+ $form.find('input[name="ta"]').remove();
77
- $form.append('<input type="hidden" name="ta" value="' + seasonSelect + '" />');
80
+ $form.append('<input type="hidden" name="ta" value="' + categorySelect + '" />');
81
+ }
82
+
83
+ // シーズンのとき
84
+ if(inputValue != seasonTag){
85
+ $season.on('click', function(){
86
+ $form.find('input[name="ta"]').remove();
87
+ $form.append('<input type="hidden" name="ta" value="' + categoryTag + ',' + seasonSelect + '" />');
78
- });
88
+ });
89
+ }
79
- });
90
+ });
91
+
92
+ });
93
+ </script>
80
94
  ```

1

2020/10/04 22:22

投稿

kimisuke553
kimisuke553

スコア11

title CHANGED
@@ -1,1 +1,1 @@
1
- Jqueryで絞り込みの処理時、inputの値をつなげてapendしたい。
1
+ Jqueryで絞り込みの処理時、inputの値をつなげてappendしたい。
body CHANGED
@@ -1,5 +1,5 @@
1
1
  ### 実現したい事
2
- 絞り込みの処理で、inputの値をつなげてapendしたい。
2
+ 絞り込みの処理で、inputの値をつなげてappendしたい。
3
3
  【パターン】
4
4
  1:カテゴリーに「women」「men」「kids」のボタンがあり、値を1つだけとりだす。
5
5
  2:シーズンに「春夏」「秋冬」「全て」のボタンがあり、値を1つだけとりだす。