ボタンをクリックして何かを行い、同じボタンをクリックして元に戻します。

Question

ボタンをリスト内に作成しようとしていますが、もう一度クリックするとラインスルが取り消されます。私は.toggle()を試みたが、それはうまくいきませんでした：

元のコード：

$("div").on("click", ".doneButt", function(e) { 
    e.preventDefault(); 
    $(this).parents("li").css("text-decoration", "line-through"); 
}); 

.toggleの試み：

$(".doneButt").toggle(function() { 
    $(this).parents("li").css("text-decoration", "line-through"); 
}, function() { 
    $(this).parents("li").css("text-decoration", "none"); 
}); 

Answer 1

$(".doneButt").click(function() { 
 
    $(this).parents("li").toggleClass('withline'); 
 
});

.withline { 
 
    text-decoration: line-through 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>asdasdasda 
 
    <input type='button' class='doneButt' value='Click' /> 
 
    </li> 
 
</ul>

1. 使用方法.toggleClass()

Answer 2

$(".doneButt").on("click",function() { 
     var style = $(this).attr("style")+""; 
     if(style=="undefined") 
      $(this).parents("li").css("text-decoration", "line-through"); 
     else 
      $(this).parents("li").removeAttr("style"); 
     });