bugfix> javascript > 投稿

免責事項:これは私の最初の投稿であり、私はコーディングに非常に新しいです。真剣な興味と決意からコーディングを自分で学ぶように私の最強の人を試してみてください。コード内の何かを改善できるかどうか、または物事を別の方法で行う必要があるかどうかを教えてください。優しく笑

現在、私は開発者が私に基本を取り払うのを手伝うために私に与えた小さなプロジェクトに取り組んでいます。彼は私に3x3のテーブルを作成してもらい、正方形をクリックすると黒に変わり、もう一度クリックすると白に戻るようにしました。

私の次の目標は、各正方形の色が書き出され、正方形がクリックされると変化する順序のないリストを作成することです。といった:

R1C1は白......クリック...... R1C1は黒です。

私はこれについて多くの灰白質を燃やしました、そして、それを理解することができないようです。私は、役に立たないさまざまな方法でそれにアプローチしようとしました。すべてのヘルプを事前に感謝します。

td {
  background: white;
  cursor: pointer;
  padding 2px
}
td.black-cell {
  background: black;
}
.hidden {
  display: none;
}

<html>
<head>
  <title>My Game</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="game2css.css">
  <style>
      table {
      width: 50%;
      height: 50%;
    }
    
    td,
    th {
      border: 2px solid;
      padding: 10px;
     }
  </style>
</head>
<body>
  <table>
    <tr>
      <td onclick='myFunction()' id="top-left"> </td>
      <td id="top-middle"></td>
      <td id="top-right"></td>
    </tr>
    <tr>
      <td id="middle-left"></td>
      <td id="middle-middle"></td>
      <td id="middle-right"></td>
    </tr>
    <tr>
      <td id="bottom-left"></td>
      <td id="bottom-middle"></td>
      <td id="bottom-right"></td>
    </tr>
  </table>
  <UL id="BWList">
    <li id="r1c1">Row 1, Column 1 is white.</li>
    <li id="r1c2">Row 1, Column 2 is white.</li>
    <li id="r1c3">Row 1, Column 3 is white.</li>
    <li id="r2c1">Row 2, Column 1 is white.</li>
    <li id="r2c2">Row 2, Column 2 is white.</li>
    <li id="r2c3">Row 2, Column 3 is white.</li>
    <li id="r3c1">Row 3, Column 1 is white.</li>
    <li id="r3c2">Row 3, Column 2 is white.</li>
    <li id="r3c3">Row 3, Column 3 is white.</li>
  </UL>
  <script>
    $(function() {
      $('td').click(function() {
        $(this).toggleClass("black-cell");
      });
    });
    function myFunction() {
      var textnode = document.createTextNode("Black")
      var item =
        document.getElementById("r1c1").childNodes[0];
      item.replaceChild(textnode, item.childNodes[0]);
    }
    // I'm fairly positive this is the wrong approach but included it just to show one way that I
  </script>
</body>
</html>

https://jsfiddle.net/9dwkhLyz/1/

回答 2 件
  • IDや複雑なコードを必要とせずに、このようなことを試すことができます。単に index() を使用する   li を取得するには  CSSと擬似要素を使用してテキストをターゲットにして調整する必要があります。

    $('table td').click(function() {
      $(this).toggleClass("black-cell");
      /*Get the index of the td within the tr +
        Get the index of the parent tr within the table*/
      var n = $(this).index() + $(this).parent().index() * 3;
      $('ul#BWList li').eq(n).toggleClass("selected");
    });
    
    
    table {
      width: 50%;
    }
    td{
      border: 2px solid;
      padding: 10px;
      background: white;
      cursor: pointer;
      padding 2px
    }
    td.black-cell {
      background: black;
    }
    li:after {
      content: " white."
    }
    li.selected:after {
      content: " black."
    }
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
      <tr>
        <td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td>
      </tr>
    </table>
    <ul id="BWList">
      <li>Row 1, Column 1 is</li>
      <li>Row 1, Column 2 is</li>
      <li>Row 1, Column 3 is</li>
      <li>Row 2, Column 1 is</li>
      <li>Row 2, Column 2 is</li>
      <li>Row 2, Column 3 is</li>
      <li>Row 3, Column 1 is</li>
      <li>Row 3, Column 2 is</li>
      <li>Row 3, Column 3 is</li>
    </ul>
    
    

  • ここでの迅速で汚い解決策:アイデアは同じ id を持つことです  および class  セルの名前とそれに対応する説明。次に、次のコードを使用して、セルの id と同じクラス名を持つすべてのスパンを取得できます。 。

    $("." + $(this).attr('id'))  //prepend a ".' to the ID
    
    

    これは、「#r1c1」などを「.r1c1」に置き換えるようなものであるため、スパンが選択されます。その後、CSSクラストグルを適用できます。

    jQueryを使用してテーブルとリストを作成することもできるため、コードがより簡潔になります。

    $(function() {
      $('td').click(function() {
        
        // Toggle cell style
        $(this).toggleClass("black-cell");
        
        $("." + $(this).attr('id')).each(function() {
      
          // toggle visibility of "black" and "white":
          $(this).toggleClass('hidden');
        });
      });
    });
    
    
    table {
      width: 50%;
      height: 50%;
    }
    td,
    th {
      border: 2px solid;
      padding: 10px;
    }
    td {
      background: white;
      cursor: pointer;
      padding 2px
    }
    td.black-cell {
      background: black;
    }
    /* Hide the word "black" on load. */
    .hidden {
      display: none;
    }
    
    
    <html>
    <head>
      <title>My Game</title>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <link rel="stylesheet" href="game2css.css">
    </head>
    <body>
      <table>
        <tr>
          <td id="r1c1"> </td>
          <td id="r1c2"></td>
          <td id="r1c3"></td>
        </tr>
        <tr>
          <td id="r2c1"></td>
          <td id="r2c2"></td>
          <td id="r2c3"></td>
        </tr>
        <tr>
          <td id="r3c1"></td>
          <td id="r3c2"></td>
          <td id="r3c3"></td>
        </tr>
      </table>
      <UL id="BWList">
        <li>Row 1, Column 1 is <span class="r1c1">white</span><span class="r1c1 hidden">black</span>.</li>
        <li>Row 1, Column 2 is <span class="r1c2">white</span><span class="r1c2 hidden">black</span>.</li>
        <li>Row 1, Column 3 is <span class="r1c3">white</span><span class="r1c3 hidden">black</span>.</li>
        <li>Row 2, Column 1 is <span class="r2c1">white</span><span class="r2c1 hidden">black</span>.</li>
        <li>Row 2, Column 2 is <span class="r2c2">white</span><span class="r2c2 hidden">black</span>.</li>
        <li>Row 2, Column 3 is <span class="r2c3">white</span><span class="r2c3 hidden">black</span>.</li>
        <li>Row 3, Column 1 is <span class="r3c1">white</span><span class="r3c1 hidden">black</span>.</li>
        <li>Row 3, Column 2 is <span class="r3c2">white</span><span class="r3c2 hidden">black</span>.</li>
        <li>Row 3, Column 3 is <span class="r3c3">white</span><span class="r3c3 hidden">black</span>.</li>
      </UL>
    </body>
    </html>
    
    

あなたの答え