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

工作解决方案：

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

撤消功能不起作用

3 个答案: