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

Question

我刚刚学习Jquery,并且想要在单击时使用按钮向列表项添加"文本修饰".我遇到的问题是我不能使用相同的按钮在第二次点击时将"文字装饰"变回"无"？

这是Jquery代码:

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

我尝试复制第2行和第3行,并在同一功能中将文本修饰更改为"无",但没有运气.

谢谢!

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

因此,您无需在每次点击时执行选择.