我刚刚学习 Jquery,想使用一个按钮在单击时向列表项添加“文本装饰”。我遇到的问题是,我无法使用同一按钮在第二次单击时将“文本装饰”恢复为“无”?
这是 Jquery 代码:
$(document).ready(function() {
$(".button1").click(function() {
$("ul li:nth-child(1)").css("text-decoration", "line-through");
});
});
我尝试复制第 2 行和第 3 行,并将同一函数中的文本装饰更改为“none”,但没有成功。
谢谢!
最佳答案
在 CSS 中定义一个类:
.stroked{ text-decoration: line-through; }
然后就:
$(document).ready(function() {
$(".button1").click(function() {
$("ul li:nth-child(1)").toggleClass('stroked');
});
});
编辑:当您学习 jQuery 的基础知识时,请考虑缓存您的选择器[如果它们的内容在页面生命周期中没有改变]:
$(document).ready(function() {
var $li = $("ul li:nth-child(1)");
$(".button1").click(function() {
$li.toggleClass('stroked');
});
});
因此您不必在每次点击时都执行选择。
关于Jquery:如何删除第二次点击时的删除线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20806781/