javascript - 单击时不显示直通线？

Question

我试图在单击每种成分时在其中划一条线。使用下面的代码，当我单击它时没有显示任何行。

$(document).ready(function(){
  $(".recipe .ingredients .ing li").click(function(){
    $(this).css("text-decoration", "line-through");
  });
});

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

<div class="recipe">
  <div class="ingredients">
    <h3> Ingredients </h3>
    <ul class="ing">
      <li> 1 ripe banana </li>
      <li> 1/2 ripe avocado </li>
      <li> 1 tbsp cocoa powder </li>
      <li> 4 cups chocolate almond milk </li>
      <li> 4 pitted dates </li>
    </ul>
  </div>
</div>

Answer 1

您可能希望切换line-through。

如果是这样，设置样式指令会更简单......

.ing li.linethrough {
    text-decoration: line-through
}

...并使用.toggleClass():

$(document).ready(function(){
    $(".ing li").click(function() {
        $(this).toggleClass('linethrough');
    });
});

即使您不想要切换操作，使用 CSS 指令重新设置样式仍然是有利的。

并按照其他人所说修复 HTML