Question

我有一个6行7列的表。每个单元格最初都是一个灰色圆圈。当我单击一个圆时，我需要将最后一个非蓝色圆的背景颜色从同一行（从下一行开始）更改为蓝色。

仅当最后一行的圆圈为灰色时，此代码才有效。如果最后一行的圆圈为蓝色，则不会更改倒数第二个圆圈的颜色。欢迎任何帮助或提示！

$(".circle").click(function() {
  var colindex = $(this).closest('td').index() + 1;

  for (i = 6; i > 0; i--) {
    var cell = $('tr:nth-child(' + i + ') td:nth-child(' + colindex + ')');
    if (cell.find('div').css('background-color') === 'blue') {
      i--;
    } else {
      cell.find('div').css('background-color', 'blue');
      break;
    }
  }
})

table {
  margin: auto;
  width: 50% !important;
}

.circle {
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background: #706e6e;
  border: 4px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
</table>

Answer 1

要实现您的目标，您可以获取td的索引，其中包含单击的.circle。从那里可以检索列中的所有.circle元素。然后，如果您使用类在相关的圆上设置样式，在下面的示例中，.blue可以检索上一个可用的圆并将其添加到该类中。像这样：

$(".circle").click(function() {
  let $circle = $(this);
  let colIndex = $circle.closest('td').index();
  $circle.closest('table')
    .find('tr td:nth-child(' + (colIndex + 1) + ') .circle:not(.blue):last')
    .addClass('blue');
})

table {
  margin: auto;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #706e6e;
  border: 4px solid black;
}

.circle.blue {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
  <tr>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
    <td><div class="circle"></div></td>
  </tr>
</table>

请注意，在此示例中，我仅使圆圈变小，以便它们更适合代码段。

Answer 2

看起来.css('background-color')不能与颜色名称相同，但必须与RGB相同。因此，蓝色等于rgb(0, 0, 255)。同样，如果它将最后一个元素识别为blue，则不必迭代i--，因为在下一个循环中它将再次迭代负1，将其添加到前一个元素中，即迭代负2。

您的for循环代码应如下所示：

for (i=6;i>=0;i--){

    var cell = $('tr:nth-child('+i+') td:nth-child('+colindex+')');

    if(cell.find('div').css('background-color')!=='rgb(0, 0, 255)'){

        cell.find('div').css('background-color','blue');
        break;

    }
}

更改列中最后一个div的CSS

2 个答案: