撤消功能不起作用

Question

这并不严格地具有撤消按钮，但是我有灰色的功能并在点击时穿出物品。当再次点击时，我想让灰色和交叉线恢复正常（黑色而不是交叉）。 https://codepen.io/HelleFl/pen/OjNQop

$(".item").click(function() { 
    $(this).css("text-decoration", "line-through"); 
    $(this).css("color", "gray");  
    if ($(this).css('color', 'gray') { 
    $(this).click(function() { 
     $(this).css('color', 'black'); 
     $(this).css('text-decoration', 'none'); 
     }) 
    }); 

我似乎无法弄清楚，并codepen告诉我检查了分号。

Answer 1

$(".item").click(function() { 
 
    $(this).toggleClass('grayStrike'); 
 
}); 
 

 

 
//or without a class 
 

 

 
$(".item2").click(function() { 
 
    if ($(this).css('text-decoration').split(' ')[0] !== "line-through") { 
 
    $(this).css("text-decoration", "line-through"); 
 
    $(this).css("color", "gray"); 
 
    } else { 
 
    $(this).css('color', ''); 
 
    $(this).css('text-decoration', ''); 
 
    } 
 
}); 
 

 

 
//delegate version so if new items are created, it doesn't matter 
 

 
$(document).on('click', ".item3", function() { 
 
    if ($(this).css('text-decoration').split(' ')[0] !== "line-through") { 
 
    $(this).css("text-decoration", "line-through"); 
 
    $(this).css("color", "gray"); 
 
    } else { 
 
    $(this).css('color', ''); 
 
    $(this).css('text-decoration', ''); 
 
    } 
 
});

.item.grayStrike { 
 
    color: gray; 
 
    text-decoration: line-through; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item">test</div> 
 
<hr> 
 
<div class="item2">test1</div> 
 
<div class="item2">test2</div> 
 
<div class="item2">test3</div> 
 
<div class="item2">test4</div> 
 
<div class="item2">test5</div> 
 
<div class="item2">test6</div> 
 
<div class="item2">test7</div> 
 
<div class="item2">test8</div> 
 
<hr> 
 
<div class="item3">test1</div> 
 
<div class="item3">test2</div> 
 
<div class="item3">test3</div> 
 
<div class="item3">test4</div> 
 
<div class="item3">test5</div> 
 
<div class="item3">test6</div> 
 
<div class="item3">test7</div> 
 
<div class="item3">test8</div>

否则，如果你不想使用一个类。

Answer 2

$(".item").click(function() { 
     $(this).css("text-decoration", "line-through"); 
     $(this).css("color", "gray");  
     if ($(this).css('color', 'gray')) { 
     // $(this).click(function() { 
      $(this).css('color', 'black'); 
      $(this).css('text-decoration', 'none'); 
      }else{ 
      $(this).css('color', 'gray'); 
      $(this).css('text-decoration', 'line-through');} 
     // }) 
     }); 

Answer 3

A工作液：

$(document).on("click", ".item", function() { 
    if ($(this).css("text-decoration").split(" ")[0] !== "line-through") { 
    $(this).css("text-decoration", "line-through"); 
    $(this).css("color", "gray"); 
    } else { 
    $(this).css("color", ""); 
    $(this).css("text-decoration", ""); 
    } 
});