javascript - html 表中 removeclass() 的转换
问题描述
我想知道如何设置方法transition
。removeclass
当我添加类时,transition-duration
效果很好,但是当我通过单击undo
按钮删除类时,transition
不起作用。
我怎样才能transition-duration
进去removeClass
?
此致
$(function() {
let clicked = [];
$("td").click(function() {
let clickedID = $(this).attr('id');
clicked.push(clickedID);
$(this).addClass("aqua");
});
$("#undo").on('click',() => {
if(clicked.length) {
let lastClicked = clicked.pop();
$(`td#${lastClicked}`).removeClass("aqua");
}
})
});
.aqua{
background-color: aqua;
transition-duration: 0.4s;
}
td {
padding: 5px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td>
</table>
<button id="undo">undo</button>
解决方案
只需在 TD 中添加过渡。
$(function() {
let clicked = [];
$("td").click(function() {
let clickedID = $(this).attr('id');
clicked.push(clickedID);
$(this).addClass("aqua");
});
$("#undo").on('click',() => {
if(clicked.length) {
let lastClicked = clicked.pop();
$(`td#${lastClicked}`).removeClass("aqua");
}
})
});
.aqua{
background-color: aqua;
}
td {
padding: 5px;
transition: 0.3s ease-in-out all;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td>
</table>
<button id="undo">undo</button>
推荐阅读
- matlab-app-designer - MATLAB APP DESIGNER 不保存和关闭
- c# - ASP.NET Core 5,带有来自正文的参数的 HttpPut 请求始终返回 Http 400 错误请求
- android - 恼人的 x 轴溢出在 chrome 移动浏览器上创建空白
- javascript - 如何修复无法读取未定义的属性“通道”
- strapi - 如何在 Strapi 中为用户模型创建自定义上传 API?
- python - HTTPError:HTTP 错误 403:使用 pytorch 下载 MNIST 数据集时被禁止
- python - python3.7请求:记录到文件:不记录所有内容
- r - emmeans 能否将球形校正应用于重复测量对比?
- pytorch - PyTorch Lightning 是否在整个时期内平均指标?
- java - SpringBoot 2.4.2框架中Gradle项目中RestAssured的静态导入无法解决