group1,group2で選択したチェックボックスの文字列を変数orderに格納しています。orderに格納されている要素それぞれについて、cutクラスを持っていればnum_possibleを3にする、G2クラスを持っていればnum_possible-=1にするという変数うを var cut = $(order[m]).hasClass('cut');と var power = $(order[m]).hasClass('G2');で定義し、配列orderについてfor文を書きました。
現在の問題点は
・cutクラスを持ったチェックボックスをチェックしても変数cutがtrueにならないこと
・G2クラスを持ったチェックボックスをチェックしても変数powerがtrueにならないこと
です。私はvar cut = $(order[m]).hasClass('cut')の書き方に問題があると考えています。適切な書き方がございましたら教えていただけると幸いです。
javascript
1<!DOCTYPE html> 2<html lang="js"> 3<head> 4 <meta charset="utf-8"> 5 <title>rings Dscore</title> 6 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 7 <script> 8 9 /********************** 選択技表示機能 *******************/ 10 11 $('.group input').on('change',function(){ 12 $(this).closest('label').attr('data-date',$(this).is(':checked')?new Date().getTime():null); 13 var order=$('.group label[data-date]').sort(function(x,y){ 14 return $(x).attr('data-date')-$(y).attr('data-date'); 15 }).map(function(){ 16 return $(this).text(); 17 }).get(); 18 console.log(order[3]); 19 var num_possible = 3 20 console.log(num_possible); 21 var n = $("input[type=checkbox]:checked").length; 22 console.log(n); 23 ** var cut = $(order[m]).hasClass('cut');** 24 console.log(cut); 25 **var power = $(order[m]).hasClass('G2');** 26 console.log(power); 27 for(var m=0 ; m < n ; m++){ 28 console.log(order); 29 if(cut){ 30 num_possible =3 31 if(m == n){ 32 break; 33 }else{ 34 m += 1; 35 } 36 }else if(num_possible == 0){ 37 $("input[type=checkbox].G2:not(:checked)").prop("disabled",true); 38 if(m == n){ 39 break; 40 }else{ 41 m += 1; 42 } 43 }else if(power){ 44 num_possible -= 1; 45 if(m == n){ 46 break; 47 }else{ 48 m += 1; 49 } 50 }else{ 51 if(m == n){ 52 break; 53 }else{ 54 m += 1; 55 } 56 } 57 } 58 }); 59 60 61 }); 62 </script> 63</head> 64<body> 65 <div class="top"></div> 66 <div class ="group"> 67 <div class= "group1"> 68 <table border="" width="840px" height="700" class = "graph_s"> 69 <tr><th colspan=6 height="10%" ></th></tr> 70 <tr width="16%" height="10%"> 71 <th></th><th></th><th></th><th> 72 </th><th></th><th></th> 73 </tr> 74 <tr align="center"> 75 <td> 76 <label><input type="checkbox" class="G1 cut" value="0.1" >aaa</label> 77 </td> 78 <td> 79 <label><input type="checkbox" class="G1 cut" value="0.2" >bbb</label> 80 </td> 81 <td> 82 <label><input type="checkbox" class="G1 cut" value="0.3" >ccc</label> 83 <td> 84 <label><input type="checkbox" class="G1 cut" value="0.4" >ddd</label> 85 </td> 86 <td> 87 <label><input type="checkbox" class="G1 cut" value="0.5" >eee</label> 88 </td> 89 <td> 90 <label><input type="checkbox" class="G1 cut" value="0.6" >fff</label> 91 </td> 92 </tr> 93 <tr align="center"> 94 <td> 95 <label><input type="checkbox" class="G1 cut" value="0.1" >aaa</label> 96 </td> 97 <td> 98 <label><input type="checkbox" class="G1 cut" value="0.2" >bbb</label> 99 </td> 100 <td> 101 <label><input type="checkbox" class="G1 cut" value="0.3" >ccc</label> 102 <td> 103 <label><input type="checkbox" class="G1" value="0.4" >ddd</label> 104 </td> 105 <td> 106 <label><input type="checkbox" class="G1" value="0.5" >eee</label> 107 </td> 108 <td> 109 <label><input type="checkbox" class="G1" value="0.6" >fff</label> 110 </td> 111 </tr> 112 <tr align="center"> 113 <td> 114 <label><input type="checkbox" class="G1" value="0.1" >aaa</label> 115 </td> 116 <td> 117 <label><input type="checkbox" class="G1" value="0.2" >bbb</label> 118 </td> 119 <td> 120 <label><input type="checkbox" class="G1" value="0.3" >ccc</label> 121 <td> 122 <label><input type="checkbox" class="G1" value="0.4" >ddd</label> 123 </td> 124 <td> 125 <label><input type="checkbox" class="G1" value="0.5" >eee</label> 126 </td> 127 <td> 128 <label><input type="checkbox" class="G1" value="0.6" >fff</label> 129 </td> 130 </tr> 131 132 </table> 133</div> 134<div class= "group2"> 135 <table border="" width="840px" height="700" class = "graph_s"> 136 <tr><th colspan=6 height="10%" ></th></tr> 137 <tr width="16%" height="10%"> 138 <th></th><th></th><th></th><th> 139 </th><th></th><th></th> 140 </tr> 141 <tr align="center"> 142 <td> 143 <label><input type="checkbox" class="G2" value="0.1" >aaa</label> 144 </td> 145 <td> 146 <label><input type="checkbox" class="G2" value="0.2" >bbb</label> 147 </td> 148 <td> 149 <label><input type="checkbox" class="G2" value="0.3" >ccc</label> 150 <td> 151 <label><input type="checkbox" class="G2" value="0.4" >ddd</label> 152 </td> 153 <td> 154 <label><input type="checkbox" class="G2" value="0.5" >eee</label> 155 </td> 156 <td> 157 <label><input type="checkbox" class="G2" value="0.6" >fff</label> 158 </td> 159 </tr> 160 <tr align="center"> 161 <td> 162 <label><input type="checkbox" class="G2" value="0.1" >aaa</label> 163 </td> 164 <td> 165 <label><input type="checkbox" class="G2" value="0.2" >bbb</label> 166 </td> 167 <td> 168 <label><input type="checkbox" class="G2" value="0.3" >ccc</label> 169 <td> 170 <label><input type="checkbox" class="G2" value="0.4" >ddd</label> 171 </td> 172 <td> 173 <label><input type="checkbox" class="G2" value="0.5" >eee</label> 174 </td> 175 <td> 176 <label><input type="checkbox" class="G2" value="0.6" >fff</label> 177 </td> 178 </tr> 179 180 </table> 181</div> 182</div> 183<script src="script.js"></script> 184</body> 185</html>
あなたの回答
tips
プレビュー