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

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

ただいまの
回答率

90.40%

  • JavaScript

    21456questions

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

  • jQuery

    8539questions

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

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 79

kuuuuuya

score 17

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')の書き方に問題があると考えています。適切な書き方がございましたら教えていただけると幸いです。

<!DOCTYPE html>
<html lang="js">
<head>
    <meta charset="utf-8">
    <title>rings Dscore</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>

        /********************** 選択技表示機能 *******************/

        $('.group input').on('change',function(){
         $(this).closest('label').attr('data-date',$(this).is(':checked')?new Date().getTime():null);
          var order=$('.group label[data-date]').sort(function(x,y){
          return $(x).attr('data-date')-$(y).attr('data-date');
          }).map(function(){
          return $(this).text();
          }).get();
          console.log(order[3]);
          var num_possible = 3
          console.log(num_possible);
          var n = $("input[type=checkbox]:checked").length;
          console.log(n);
         ** var cut = $(order[m]).hasClass('cut');**
          console.log(cut);
          **var power = $(order[m]).hasClass('G2');**
          console.log(power);
          for(var m=0 ; m < n ; m++){
          console.log(order);
          if(cut){
             num_possible =3
              if(m == n){
                  break;
              }else{
                  m += 1;
              }
          }else if(num_possible == 0){
            $("input[type=checkbox].G2:not(:checked)").prop("disabled",true);
             if(m == n){
                  break;
              }else{
                  m += 1;
              }
          }else if(power){
             num_possible -= 1;
             if(m == n){
                  break;
              }else{
                  m += 1;
              }
          }else{
             if(m == n){
                  break;
              }else{
                  m += 1;
              }
          }
         }
         });


      });
    </script>
</head>
<body>
 <div class="top"></div>
 <div class ="group">
    <div class= "group1">
    <table border="" width="840px" height="700" class = "graph_s">
        <tr><th colspan=6 height="10%" ></th></tr>
        <tr width="16%" height="10%">
            <th></th><th></th><th></th><th>
            </th><th></th><th></th>
        </tr>
        <tr align="center">
            <td>
                <label><input type="checkbox" class="G1 cut" value="0.1" >aaa</label>
            </td>
            <td>
               <label><input type="checkbox" class="G1 cut" value="0.2" >bbb</label>
            </td>
            <td>
               <label><input type="checkbox" class="G1 cut" value="0.3" >ccc</label>
            <td>
               <label><input type="checkbox" class="G1 cut" value="0.4" >ddd</label>
            </td>
            <td>
               <label><input type="checkbox" class="G1 cut" value="0.5" >eee</label>
            </td> 
            <td>
                <label><input type="checkbox" class="G1 cut" value="0.6" >fff</label>
            </td>
        </tr>
     <tr align="center">
            <td>
                <label><input type="checkbox" class="G1 cut" value="0.1" >aaa</label>
            </td>
            <td>
               <label><input type="checkbox" class="G1 cut" value="0.2" >bbb</label>
            </td>
            <td>
               <label><input type="checkbox" class="G1 cut" value="0.3" >ccc</label>
            <td>
               <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
            </td>
            <td>
               <label><input type="checkbox" class="G1" value="0.5" >eee</label>
            </td>
            <td>
                <label><input type="checkbox" class="G1" value="0.6" >fff</label>
            </td>
        </tr>
      <tr align="center">
            <td>
                <label><input type="checkbox" class="G1" value="0.1" >aaa</label>
            </td>
            <td>
               <label><input type="checkbox" class="G1" value="0.2" >bbb</label>
            </td>
            <td>
               <label><input type="checkbox" class="G1" value="0.3" >ccc</label>
            <td>
               <label><input type="checkbox" class="G1" value="0.4" >ddd</label>
            </td>
            <td>
               <label><input type="checkbox" class="G1" value="0.5" >eee</label>
            </td>
            <td>
                <label><input type="checkbox" class="G1" value="0.6" >fff</label>
            </td>
        </tr>

    </table>
</div>
<div class= "group2">
    <table border="" width="840px" height="700" class = "graph_s">
        <tr><th colspan=6 height="10%" ></th></tr>
        <tr width="16%" height="10%">
            <th></th><th></th><th></th><th>
            </th><th></th><th></th>
        </tr>
        <tr align="center">
            <td>
                <label><input type="checkbox" class="G2" value="0.1" >aaa</label>
            </td>
            <td>
               <label><input type="checkbox" class="G2" value="0.2" >bbb</label>
            </td>
            <td>
               <label><input type="checkbox" class="G2" value="0.3" >ccc</label>
            <td>
               <label><input type="checkbox" class="G2" value="0.4" >ddd</label>
            </td>
            <td>
               <label><input type="checkbox" class="G2" value="0.5" >eee</label>
            </td>
            <td>
                <label><input type="checkbox" class="G2" value="0.6" >fff</label>
            </td>
        </tr>
     <tr align="center">
            <td>
                <label><input type="checkbox" class="G2" value="0.1" >aaa</label>
            </td>
            <td>
               <label><input type="checkbox" class="G2" value="0.2" >bbb</label>
            </td>
            <td>
               <label><input type="checkbox" class="G2" value="0.3" >ccc</label>
            <td>
               <label><input type="checkbox" class="G2" value="0.4" >ddd</label>
            </td>
            <td>
               <label><input type="checkbox" class="G2" value="0.5" >eee</label>
            </td>
            <td>
                <label><input type="checkbox" class="G2" value="0.6" >fff</label>
            </td>
        </tr>
      
    </table>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • kuuuuuya

    2019/07/12 15:03

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

    キャンセル

  • x_x

    2019/07/12 16:36

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

    キャンセル

  • yasutomi

    2019/07/12 20: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')の書き方に問題があると考えています。
    適切な書き方がございましたら教えていただけると幸いです。

    キャンセル

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

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

  • ただいまの回答率 90.40%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21456questions

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

  • jQuery

    8539questions

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