我有一个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>
答案 0 :(得分: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>
请注意,在此示例中,我仅使圆圈变小,以便它们更适合代码段。
答案 1 :(得分:1)
看起来.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;
}
}