Question

我有这个功能：

  $('.circleShape').click(function(){
    var colno = $(this).attr('class').substring(25, 30);
    for (var i = (cols-1); i >=0 ; i--) { //cols is a number of columns on the board
      if ($(colno).eq(i).hasClass('circleInitial')) {
        alert('old color');
        $(colno).eq(i).removeClass('circleInitial').addClass('circlePlayerOne');
        break;
      }
    }
  });

如果单击列的任何元素，我想更改尚未更改的同一列中最低元素的类。但是$（colno）语句无法获取必要的元素。我该如何实现呢？三天前我开始学习JS和jQuery，所以我无法弄清楚自己。这是HTML中的正文内容

<body>
    <div class="container">
      <div class="jumbotron">
        <h2>Welcome to Connect Four!</h1>
        <h3>The object of this game is to connect four of your chips in a row!</h3>

      </div>
    </div>
    <table id='board'>

    </table>
    <script src='js/jquery-3.2.1.js'></script>
    <script src='js/connect_four.js'></script>
  </body>

实际上，我以这种方式生成表格：

  function initBoard(){
  var chip = "<td class='chip'><div class='circleShape circleInitial'> </div></td>";
  var chips = Array(cols).fill(chip);
  chips = "<tr>" + chips + "/tr";
  $('#board').html(Array(rows).fill(chips));
  for (var i = 0; i < chipsTotal; i++) {
    var col='col' + (i%cols).toString();
    var row='row' + (~~(i/cols)).toString()
    $('.chip > div').eq(i).addClass(col).addClass(row);
  };

Answer 1

找到点击的td的索引和tbody的最后一行。然后将最后一行tr的索引与找到的索引匹配。

$("td").click(function(){
 var index = $(this).index();
 var lastRow = $(this).closest('tbody').find('tr').last();
 var colEnd = lastRow.find('td').eq(index);
 console.log(colEnd.text());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Demo 1</td>
      <td>Demo 2</td>
      <td>Demo 3</td>
    </tr>
    <tr>
      <td>Demo 4</td>
      <td>Demo 5</td>
      <td>Demo 6</td>
    </tr>
    <tr>
      <td>Demo 7</td>
      <td>Demo 8</td>
      <td>Demo 9</td>
    </tr>
    <tr>
      <td>Demo 10</td>
      <td>Demo 11</td>
      <td>Demo 12</td>
    </tr>
    <tr>
      <td>Demo 13</td>
      <td>Demo 14</td>
      <td>Demo 15</td>
    </tr>
  </tbody>
</table>

在您的情况下，只需点击.circleShape即可编写上述过程，前提是呈现的HTML具有类似的结构。

$("table#board").on("click", ".circleShape", (function(){
 var index = $(this).index();
 var lastRow = $(this).closest('tbody').find('tr').last();
 var colEnd = lastRow.find('td').eq(index);
 colEnd.removeClass('circleInitial').addClass('circlePlayerOne');
})

无法在jquery函数中更改类

1 个答案: