実現したいこと
フォームのラジオボタンとチェックボックスを選択していき、表画像のように各商品にだけ0か1ずつ加点していき合計点数を出したい。
そして合計点数が高い商品2つを表示したい商品と紐づけてopenというクラスを付与したい。
合計点数を出すまではできたが、紐づける方法が全くわからない。
JS初心者でソースも汚いです。
発生している問題・分からないこと
今の方法では配列の商品1とクラスの$("itemimg1")などの紐付けができない気がする。
該当のソースコード
html
1 <form action="" id="form"> 2 <div class="inner"> 3 <h1>質問1</h1> 4 <label for=""><input type="radio" id="qa01_01" name="qa01" value="11111">軽い</samp></label> 5 <label for=""><input type="radio" id="qa01_02" name="qa01" value="01111">重い</label> 6 </div> 7 <div class="inner"> 8 <h1>質問2</h1> 9 <label for="qa02_01"><input type="radio" id="qa02_01" name="qa02" value="00101">大きい</label> 10 <label for="qa02_02"><input type="radio" id="qa02_02" name="qa02" value="10000">小さい</label> 11 </div> 12 <div class="inner"> 13 <h1>質問3</h1> 14 <label for="qa03_01"><input type="radio" id="qa03_01" name="qa03" value="00011">硬い</label> 15 <label for="qa03_02"><input type="radio" id="qa03_02" name="qa03" value="11100">柔らかい</label> 16 <label for="qa03_03"><input type="radio" id="qa03_03" name="qa03" value="00011">普通</label> 17 </div> 18 <div class="inner"> 19 <h1>質問4</h1> 20 <label for="qa04_01"><input type="checkbox" id="qa04_01" name="qa04" value="01011"/>赤</label> 21 <label for="qa04_02"><input type="checkbox" id="qa04_02" name="qa04" value="10001"/>青</label> 22 <label for="qa04_03"><input type="checkbox" id="qa04_03" name="qa04" value="00010"/>黄色</label> 23 </div> 24 <input type="button" class="btn" value="送信する"> 25 </form> 26 <div class="itemimg1">item01</div> 27 <div class="itemimg2">item02</div> 28 <div class="itemimg3">item03</div> 29 <div class="itemimg4">item04</div> 30 <div class="itemimg5">item05</div>
jQuery
1var item = ['商品1' , '商品2' , '商品3' , '商品4' , '商品5']; 2item[0] = $(".itemimg1"); 3item[1] = $(".itemimg2"); 4item[2] = $(".itemimg3"); 5item[3] = $(".itemimg4"); 6item[4] = $(".itemimg5"); 7 8$('input:button').click(function() { 9 10var qa01 = $('input[name="qa01"]:checked').val(); 11var qa02 = $('input[name="qa02"]:checked').val(); 12var qa03 = $('input[name="qa03"]:checked').val(); 13var qa04 = $('input[name="qa04"]:checked').val(); 14 15for (let i = 0; i < 5; i++ ) { 16 item[i] = Number(qa01[i]) + Number(qa02[i]) + Number(qa03[i]) + Number(qa04[i]); 17 console.log(item[i]); 18} 19 20 21function compareFunc(a, b) { 22 return b - a; 23} 24newitem = item.sort(compareFunc); 25console.log(newitem);
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
ifを試してり、色々してみたができる気がしない
補足
特になし