Jquery:如何删除第二次点击时的删除线？

Question

我刚刚学习 Jquery，想使用一个按钮在单击时向列表项添加“文本装饰”。我遇到的问题是，我无法使用同一按钮在第二次单击时将“文本装饰”恢复为“无”？

这是 Jquery 代码:

$(document).ready(function() {
    $(".button1").click(function() {
    $("ul li:nth-child(1)").css("text-decoration", "line-through");
    });
});

我尝试复制第 2 行和第 3 行，并将同一函数中的文本装饰更改为“none”，但没有成功。

谢谢!

Answer 1

在 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');
    });
});

因此您不必在每次点击时都执行选择。