Jquery 更改列中最后一个div的CSS
我有一个6行7列的表格。每个单元格最初都是一个灰色圆圈。当我点击一个圆圈时,我需要将最后一个非蓝色圆圈的背景颜色从同一列的底部行开始更改为蓝色 此代码仅在最后一行的圆圈为灰色时有效。如果最后一行的圆是蓝色的,则不会更改从第二行到最后一行的圆的颜色。欢迎任何帮助或提示Jquery 更改列中最后一个div的CSS,jquery,Jquery,我有一个6行7列的表格。每个单元格最初都是一个灰色圆圈。当我点击一个圆圈时,我需要将最后一个非蓝色圆圈的背景颜色从同一列的底部行开始更改为蓝色 此代码仅在最后一行的圆圈为灰色时有效。如果最后一行的圆是蓝色的,则不会更改从第二行到最后一行的圆的颜色。欢迎任何帮助或提示 $(“.circle”)。单击(函数(){ var colindex=$(this).closest('td').index()+1; 对于(i=6;i>0;i--){ 变量单元格=$('tr:n个子('+i+')td:n子('+
$(“.circle”)。单击(函数(){
var colindex=$(this).closest('td').index()+1;
对于(i=6;i>0;i--){
变量单元格=$('tr:n个子('+i+')td:n子('+colindex+'));
if(cell.find('div').css('background-color')='blue')){
我--;
}否则{
cell.find('div').css('background-color','blue');
打破
}
}
})
表格{
保证金:自动;
宽度:50%!重要;
}
.圆圈{
宽度:100px;
高度:100px;
-moz边界半径:50px;
-webkit边界半径:50px;
边界半径:50px;
背景:#706e6e;
边框:4倍纯黑;
}
要实现您的目标,您可以获取包含单击的
圆圈的td
索引。从那里可以检索列中的所有。圈出元素。如果随后使用类在相关圆上设置样式,则在下面的示例中,.blue
,您可以检索最后一个可用圆并将该类添加到其中。大概是这样的:
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;
}
}
$(“.circle”)。单击(函数(){
让$circle=$(这个);
设colIndex=$circle.closest('td').index();
$circle.closest('表')
.find('tr td:n个子('+(colIndex+1)+')。圆圈:非(.blue):最后一个')
.addClass(“蓝色”);
})
表格{
保证金:自动;
}
.圆圈{
宽度:20px;
高度:20px;
边界半径:50%;
背景:#706e6e;
边框:4倍纯黑;
}
.圆圈.蓝色{
背景颜色:蓝色;
}
它看起来像.css('background-color')
不能与颜色名称相同,但必须与RGB的值相同。因此,与蓝色等价的u是rgb(0,0255)
。另外,如果它将最后一个元素识别为蓝色,它将不必迭代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;
}
}
非常感谢你的宝贵帮助。这很有道理。我仍在努力找出我的代码出了什么问题。我是jquery的新手。谢谢!是的,当然我忘了删除I——因为我最初使用了while循环。感谢您提供有关rgb等价物的提示。我不知道!