Q&A
これだけでは再現確認できませんので、htmlもご提示ください
条件分岐でmeatとcandyのチェックボックスを両方選択した場合の情報を出したいのですが、どうしても片方の情報しか出せません
どのように分岐すれば良いでしょうか？
javascript
1getProductsList(); 2 3 $('.refine-search-form input').on('change', function(event) { 4 // createArray(event); 5 getProductsList(event); 6 }); 7 8 /** 9 * ---------------------- ajaxでデータを取得する関数 ------------------------ 10 */ 11 12 function getProductsList(event) { 13 $.ajax({ 14 url: './service.json', 15 method: 'get', 16 dataType: 'json' 17 }) 18 .done(function(data) { 19 createArray(data, event); 20 }); 21 }
html
1<div class="products block"> 2 <h2 class="section-header"> 3 <span>ミルミールの製品</span> 4 </h2> 5 <form class="refine-search-form fs-18"> 6 <input type="hidden" name="mode" value="json" class="target"> 7 <input type="hidden" name="disp_number" value="1000" class="target"> 8 <input type="checkbox" value="candy" class="target"> 9 <label for="category_id34">インフルブロックのど飴</label> 10 <input type="checkbox" value="pastry" class="target"> 11 <label for="category_id32">菓子</label> 12 <input type="checkbox" value="juice" class="target"> 13 <label for="category_id31">ジュース・飲料</label> 14 <input type="checkbox" value="seasoning" class="target"> 15 <label for="category_id30">調味料</label> 16 <input type="checkbox" value="vegetables" class="target"> 17 <label for="category_id29">野菜・果物</label> 18 <input type="checkbox" value="fish" class="target"> 19 <label for="category_id28">鮮魚・海産物</label> 20 <input type="checkbox" value="meat" class="target"> 21 <label for="category_id27">牛肉・豚肉・鶏肉他</label> 22 <input type="checkbox" value="food" class="target"> 23 <label for="category_id8">食品</label> 24 <input type="checkbox" value="otherwise" class="target"> 25 <label for="category_id33">その他</label> 26 </form> 27 <div class="block-body"> 28 <ul class="refine-seach list" id="demo"> 29 </ul> 30 </div> 31 </div> 32
JavaScript
1 function createArray(data, event) { 2 $('.refine-seach').empty(); 3 var candyArray = [1,2,3,4,5]; 4 var meatArray = [10,11,12,13,14,15,16,17,18,19]; 5 var newArray = []; 6 var targetVal; 7 if (event) { 8 console.log(event); 9 targetVal = $(event.currentTarget).val(); 10 } 11 if(targetVal == 'candy' && targetVal == 'meat') { 12 newArray = data.products; 13 } else if(targetVal == 'meat') { 14 newArray = data.products.filter(function(item,i) { 15 return item.product_id >= 10; 16 }); 17 console.log(newArray); 18 } else if(targetVal == 'candy') { 19 newArray = data.products.filter(function(item,i) { 20 return item.product_id <= 5; 21 }); 22 } else { 23 newArray = data.products; 24 console.log(newArray); 25 }; 26 showData(newArray); 27 }
回答2件
0
ベストアンサー
こんな方法はいかがでしょう。
①全てのチェックボックスに適当なname(以下ではname="checkbox")を付与する。
HTML
1<div class="products block"> 2 <h2 class="section-header"> 3 <span>ミルミールの製品</span> 4 </h2> 5 <form class="refine-search-form fs-18"> 6 <input type="hidden" name="mode" value="json" class="target"> 7 <input type="hidden" name="disp_number" value="1000" class="target"> 8 <input type="checkbox" name="checkbox" value="candy" class="target"> 9 10(中略) 11 12 <input type="checkbox" name="checkbox" value="otherwise" class="target"> 13 <label for="category_id33">その他</label> 14 </form> 15 <div class="block-body"> 16 <ul class="refine-seach list" id="demo"> 17 </ul> 18 </div> 19</div>
②名前を付与したチェックボックスについて、チェックが入った項目のvalueを配列で受け取る。
JavaScript
1var array_check = $('input[name="checkbox"]:checked').map(function() { return $(this).val(); })
③配列に値が含まれるか確認する。
JavaScript
1if($.inArray('candy', array_check) != -1 && $.inArray('meat', array_check) != -1) {
投稿2018/10/19 08:11
編集2018/10/19 08:13
総合スコア992
③の中身はなにを入れれば良いですか？
③は「if(targetVal == 'candy' && targetVal == 'meat') {」
の部分を書き換えただけなので、中身は元のコードのままの想定です。
var array_check = $('input[name="checkbox"]:checked').map(function() {
return $(this).val();
})
if($.inArray('candy', array_check) != -1 && $.inArray('meat', array_check) != -1) {
newArray = data.products;
}で修正しましたが、
candy
w.fn.init ["candy", prevObject: w.fn.init(1)]
meat
w.fn.init ["candy", prevObject: w.fn.init(1)]
という文が出て来てしまい両方表示ができませんでした。
「出て来てしまい」で出て来たコードがエラーメッセージなのかなんなのかは判然としませんが、
本回答が担保できるのは「チェックボックスcandyとmeatにチェックが入った場合」の条件分岐を
満たす(「if($.inArray('candy', array_check) != -1 && $.inArray('meat', array_check) != -1) {」
の中の処理に入る)ところまでであり、その後の動作については少なくとも現状の質問文からは読み取ることが困難であるため、その動作を保証するものではありません。悪しからず…。
できました！
ヒューマンエラーが１つありました！
ありがとうございました！
重ねて質問をさせていただきたいのですが、!= -1というのはどういう意味で成立しているのかを聞きたいです。
また今回何が足りなくて表示ができなかったのかをお伺いしたいです。
回答に記載してあるリンク内にも書いてありますが、「inArray()」は探す対象が見つかった場合には「true」等ではなくその位置を数値で返します。(見つからなかった場合は「-1」を返します)
今回は「配列内に含まれている」ことを確認したいので「!= -1(≒見つからなかったの否定→含まれている)」としているわけですね。
今回元の条件分岐を満たすことができなかったのは、元のコードでは「targetValの値にその時チェックした単一の値」が常に入るようになっていたからですね。
詳細については x_x 様の回答にある補足コメントが詳しいです。
つまり、inputにcheckされた配列を新しく生成して、その値を取ってくる。その後にinArrayでチェックして探して見つかった場合はその条件式に当てはまる情報を表示したということでしょうか？
そして自分のミスは一つ一つの処理はできてはいたが、複数を選択した場合の条件を作れていなかったため、
表示される二つを選択しても、片方の処理しか行われていなかったんですね。
＞つまり〜
概ね認識誤りないですが、今回本回答で提示したコードは
「チェックが入ったチェックボックスの値を配列で受け取り」
「配列に目的の値が含まれているかを確認する」
ところまで(条件分岐を振り分ける)であり、表示部には特に関係しないですね。
(結果的に「candyとmeatの両方がチェックされている時」を満たせるようになったので、その場合の情報を表示しているのだとは思いますが…)
なるほどですね。
ちなみにif($.inArray〜の方の＄はどこのを取って来ているんですか？
詳しくはこちらのリンクを参照いただければ。
https://uxmilk.jp/11076
今回のケースはリンク内の「メソッドを単体で使う時」に相当します。
理解しました。
!= -1のように不等価演算子や−１を指定しているはどうしてですか？
本回答の 2018/10/21 00:16 の私のコメント(このコメントの8つ上)を参照してください。
そのコメントにも記載してありますが、今回は「inArray()」を使用しているため、
「inArray()」の仕様で「配列に含まれている」かどうかを確認するためにそのような記述になっています。
(「inArray()」の仕様については回答内最下段のリンク先を参照いただきたく。)
長々とありがとうございました。
またよろしくお願いします。
0
dataはサーバーの返りなので詳細は分かりませんが、ここは絶対に成立しないので誤りでしょう。
JavaScript
1if(targetVal == 'candy' && targetVal == 'meat') {
次のように修正します。
JavaScript
1var checkVals = $('.refine-search-form input').map(function(index, element) { return element.value; }).get(); 2if (checkVals && checkVals.includes('candy') && checkVals.includes('meat')) {
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
投稿2018/10/19 07:37
総合スコア13749
補足しておくと、
$('.refine-search-form input').on('change', function(event) {
で event が input の change で発生したものだとわかるため、targetVal にはそのときの単一の値が入っています。これは意図するものではないでしょう。
checkValsですべて判定すればいいのですが、Ajax呼び出し時とは違うということに気を付けなければいけません。
確認ですが、javascriptの{}内には何を入れれば良いでしょうか？
申し訳ないです。コメントする回答を間違えました…。
あなたの回答
tips
プレビュー
