我有 html 表格，我想加深重疊單元格中的顏色。例如，當我單擊 cell 時2，.nextAll(':lt(5)')方法會更改下一個單元格的類4。然后當我單擊3單元格時，顏色會改變。我想要的結果如下所示。重疊單元格的顏色將按照下面的公式改變。background-color: hsl(60,100%,95%);→background-color: hsl(60,100%,90%);有什么方法可以實現嗎？謝謝。$(function() { $("td").click(function() { $(this).nextAll(':lt(4)').addClass('color'); });});table td { width: 20px; overflow: hidden; display: inline-block; white-space: nowrap; border: 1px solid gray; text-align: center; padding: 5px; cursor: pointer;}.color { background-color: hsl(60,100%,95%);}.color2 { background-color: hsl(60,100%,90%);}.color3 { background-color: hsl(60,100%,85%);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr></table>
1 回答
米脂
TA貢獻1836條經驗 獲得超3個贊
您可以將.each()函數鏈接到.nextAll()結果，然后用于.hasClass()單獨確定每個單元格應使用哪種顏色。
$(function() {
$("td").click(function() {
$(this).nextAll(':lt(4)').each(function(i) {
if ($(this).hasClass("color2")) {
$(this).addClass('color3');
}
else if ($(this).hasClass("color")) {
$(this).addClass('color2');
}
else {
$(this).addClass('color');
}
console.log(i);
});
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.color {
background-color: hsl(60,100%,95%);
}
.color2 {
background-color: hsl(60,100%,90%);
}
.color3 {
background-color: hsl(60,100%,85%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
它可能需要一些調整來刪除不需要的類，但我測試過并且似乎可以按原樣工作。
- 1 回答
- 0 關注
- 103 瀏覽
添加回答
舉報
0/150
提交
取消