Question

我是JavaScript的初学者，并希望将其应用于我正在制作的井字游戏网站。我使用HTML表格制作了电路板。我想做到这一点，首先，董事会是明确的。然后，当您单击一次单元格时，会出现“x”的图片。单击一次单元格时，会出现“o”的图片。

这是我制作的表格的HTML和CSS。

h1 {
  text-align: center;
  color: #003b4d;
  font-family: verdana, sans-serif;
}

p {
  text-align: center;
  font-style: italic;
  font-family: verdana, sans-serif;
  font-size: 12px;
}

table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

<head>
  <title>SUPERTAC</title>
</head>

<body>

  <div id="title">
    <h1>
      Strategic Tic-Tac-Toe
    </h1>
  </div>
  <div id="lorem-ipsum">
    <p>
      Lorem ipsum dolor sit amet, urna interdum nibh sit volutpat, euismod iaculis arcu eros orci, ut lobortis risus urna, eros scelerisque dolor pellentesque dapibus fames, posuere erat quam mi curabitur.
    </p>
  </div>

  <div class="grid">
    <!---turn pictures into buttons--->
    <table class="strategic">
      <tr>
        <td>
          <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>
        </td>
        <td>
          <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>
        </td>
        <td>
          <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>
        </td>
      </tr>
      <tr>
        <td>
          <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>
        </td>
        <td>
          <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>
        </td>
        <td>
          <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>
        </td>
      </tr>
      <tr>
        <td>
          <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>
        </td>
        <td>
          <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>
        </td>
        <td>
          <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>
        </td>
      </tr>
    </table>

    <div class="directions">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>

  </div>
</body>

如果有一种方法可以使用CSS和HTML，那就更好了，因为我只是学习如何使用JavaScript。谢谢。

Answer 1

$(function(){
  
    $(".icon").click(function(e){
      e.preventDefault();
      
      var icon = $(this).find("i");
      
      if(icon.is(":visible")){
        if(icon.hasClass('fa-close')){
           icon.toggleClass('fa-circle-o');
        }
        else{
          icon.toggleClass("fa-close");
        } 
      }else{
        icon.show();
      }
      
    });
  
});

.icon{
  text-decoration: none;
  color: #000;
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid black;
  box-sizing: border-box;
  padding: .6em .7em; 
}
.icon i{
  display: none;
}

   

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 2

这应该可以帮到你

var currentPlayer = 1;

window.onload = function () {
    var tags = document.getElementsByTagName("td");

    for (i = 0; tags.length > i; i++) {
        // add event for every tag
        tags[i].addEventListener('click', function () {

            // chack the cell is empty
            if (isEmpty(this))
                setCharacter(this);
            else
                alert('cell is not empty');

        });
    }

}

function isEmpty(element) {
    if (element.innerText.length > 0)
        return false;
    else
        return true;
}

function setCharacter(element) {
    if (currentPlayer == 1) {
        element.innerText = 'X';
        currentPlayer = 2;
    }
    else {
        element.innerText = 'O';
        currentPlayer = 1;
    }
}

按下javascript时切换图像

2 个答案: