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

因此，您无需在每次点击时执行选择。

Answer 2

您应该使用.toggleClass()

$(document).ready(function() {
    $(".button1").click(function() {
        $("ul li:nth-child(1)").toggleClass("test");
    });
});

CSS：

.test {
    text-decoration: line-through;
}

Answer 3

您还可以使用.css()回调函数：

$("ul li:nth-child(1)").css("text-decoration", function(_, td) {
    return td.indexOf("line-through") == -1 
           ? "line-through" 
           : "none";
});

Answer 4

你可以使用if语句，如果你想保持纯粹的jQuery：

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

否则，你可以使用toggleClass这个使用起来有点简单，更不用说你可以使用那个类和jQuery toggleClass添加/删除一个删除任何东西

Answer 5

或者你可以这么简单地做到：

if (condition) {
  $("#yourId").wrap("<strike>");
} else {
  $("#yourId").unwrap(); //to remove the strike
}

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

5 个答案: