質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

523閲覧

javascript:  配列要素へのhasClassの使い方

kuuuuuya

総合スコア28

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/07/12 04:11

編集2022/01/12 10:55

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/07/12 04:28

毎回不要な部分を大量に乗せるのはやめ もっと質問に絞ったHTML要素だけ抽出して質問するようにしましょう
m.ts10806

2019/07/12 04:52

質問するときのヒントから引用します ""で囲った部分は特に気にしてください https://teratail.com/help/question-tips#questionTips3-5-1 >関連するソースコードを抽出して本文に含めましょう。多すぎず、少なすぎずという分量の判断は難しいことですが、読むのに苦痛ではないくらいの量に抑える必要があり、でも問題の本質がわかるほどには多くなければいけません。"最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。"そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。
kuuuuuya

2019/07/12 05:21

yambe.jpさんmts10806さん不快な思いをさせてしまい申し訳ありません。またご指摘ありがとうございます。自分なりに質問内容を変更致しました。
m.ts10806

2019/07/12 05:28

rings.css と script.js のコードがなくても再現可能なのであればHTMLから読み込みの記述を削除しておいてください。 必要なのであれば別途コードをご提示ください
yambejp

2019/07/12 05:38

いや、別に不快じゃないんですけど・・・ たまたま乗りかかった船で毎回目を通しているので、流れでなんとなく わかることが多いですが、初めて見た人は情報量がおおければおおいほど 質問の意図が読み取れず、回答する気がしなくなり、ひいては 回答が付きづらくなって質問者さんのためにならない・・というだけです。 回答を期待するなら、回答しやすい質問をするよう工夫するのが 結局はご自身のためになります。
kuuuuuya

2019/07/12 06:03

ありがとうございます。!
x_x

2019/07/12 07:36

label のテキストノードにセレクタの情報が入っていると思われますが、実際にも aaa、bbb…… といった情報になっているのですか?
yasutomi

2019/07/12 11:24

質問文もコードも読みづらいので 答えはわかりましたが、回答する気がなくなりました。 そもそも書き方以前に書かれているコードはエラーで動作しないので Consoleを確認しながら修正してください。 ** var cut = $(order[m]).hasClass('cut');** のような 意味不明なコードも修正するべきです。 あとscript.jsはいらないはず。 質問文は以下のように適切に改行を入れると 今よりも読みやすくなりますのでご参考までに。 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')の書き方に問題があると考えています。 適切な書き方がございましたら教えていただけると幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問