Question

我试图在点击每个成分时插入一条线。使用下面的代码，单击时没有显示行。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您可能希望line-through切换。

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

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

...并使用.toggleClass()：

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

即使您不想进行切换操作，使用CSS指令仍然有利于重新设置。

并像其他人所说的那样修复HTML

Answer 2

将您的代码更改为：

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

Here is the JSFiddle demo

Answer 3

一旦你让html对我有效，你的代码就可以了。

（JSFiddle）

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

<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>                                                                                                                                                        <!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

单击时没有显示直线？

3 个答案: