Klicken Sie auf die Schaltfläche macht etwas, dann klicken Sie auf die gleiche Schaltfläche rückgängig machen

Question

Ich versuche, eine Schaltfläche durch eine Liste eine Linie zu erstellen, aber wenn Sie es erneut klicken, wird es den Zeilenumbruch rückgängig machen. Ich habe ein .toggle() versucht, aber es hat nicht funktioniert:

Original-Code:

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

.toggle Versuch:

$(".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. Mit .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"); 
     });