Question

所以我对使用jQuery非常新。我已经制作了一个非常基本的购物清单，其中包含一个添加项目并清除所有功能。但是我想通过功能添加一个罢工，这样当有人点击某个特定项目时，他们已经添加了它，就像它已经完成一样。我尝试过使用

<body>
    <div id="header">
        <h1>Shopping List.</h1>
    </div>
    <div id="header2">
        <h2>What I need:</h2>
    </div>
    <div id="list">
        <ul></ul>
    </div>
        <input id="name" type="text">
        <button id="addOne">Add</button>
        <button id="clear">Clear</button>


    <div id="footer">2016</div>

    <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>"
    <script>
        $("#addOne").click(function() {
            var value = $("#name").val();
            $("ul").append("<li>" + value + "</li>");
            });
        $("#clear").click(function(){
            $("ul").empty();
        });

        $("#list").click(function(){
            $(this).wrap("<strike>");
        });
    </script>
</body>

但所有列表项都会通过。在JavaScript中会更好吗？我怎么写它以便在点击时，如果它有一个突破，它将取消攻击？

Answer 1

使用text-decoration: line-through;，在文本中定义一行

如果您想要toggle style或.css(STYLE)会这样做，可以使用.toggleClass，在每个元素中添加或删除一个或多个类匹配元素集

HTML <strike>标记。 HTML5不支持。

注意：对li(dynamic)元素使用event-delegation，因为这些元素是您的目标元素而不是父UL元素。

＆＃13;

$("#addOne").click(function() {
  var value = $("#name").val();
  $("ul").append("<li>" + value + "</li>");
});
$("#clear").click(function() {
  $("ul").empty();
});

$("#list").on('click', 'li', function() {
  //-------^^---------^^^^^ // .on method is used to bind the event on dynamic elements
  $(this).toggleClass('strike');
});

＆＃13;

.strike {
  text-decoration: line-through;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="header">
  <h1>Shopping List.</h1>
</div>
<div id="header2">
  <h2>What I need:</h2>
</div>
<div id="list">
  <ul></ul>
</div>
<input id="name" type="text">
<button id="addOne">Add</button>
<button id="clear">Clear</button>


<div id="footer">2016</div>

＆＃13;

Answer 2

问题是因为这些项目后来被添加，所以你需要处理＆＃34; li＆＃34;像这样（见下文）

$("#list").on("click", "li", function(){
    $(this).wrap("<strike>");
});

Answer 3

所有列表项都会显示，因为您为.wrap指定了div，标识为#list - 其中包含整个列表（<ul>...</ul>）。

相反，您需要为列表中的每个li元素注册该函数。

Answer 4

为您追加的每个li注册点击事件。 See example on Code pen

$(document).ready(function(){

  $("#addOne").click(function() {
        var value = $("#name").val();
          var $listItem = $("<li striked=false>" + value + "</li>");
          $listItem.click(function(){

            if($(this).attr('striked')=='true'){
              $(this).attr('striked', 'false');
              $(this).removeClass('strike-through');
            } else {
              $(this).attr('striked', 'true');
              $(this).addClass('strike-through');
            }

          });
          $("#list > ul").append($listItem);
        });

        $("#clear").click(function(){
          $("#list > ul").empty();
        });
});

CSS：

.strike-through{
  text-decoration: line-through;
}

HTML：

<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
    <div id="header">
        <h1>Shopping List.</h1>
    </div>
    <div id="header2">
        <h2>What I need:</h2>
    </div>
    <div id="list">
        <ul></ul>
    </div>
        <input id="name" type="text">
        <button id="addOne">Add</button>
        <button id="clear">Clear</button>


    <div id="footer">2016</div>

</body>

Answer 5

尝试更改此

$("#addOne").click(function() {
        var value = $("#name").val();
        $("ul").append("<li>" + value + "</li>");
        });
    $("#clear").click(function(){
        $("ul").empty();
    });

    $("#list").click(function(){
        $(this).wrap("<strike>");
    });

到

$(function(){
$("#addOne").click(function() {
    var value = $("#name").val();
    $("ul").append("<li class='listitem'>" + value + "</li>");
    addListner();
    });
    $("#clear").click(function(){
        $("ul").empty();
    });
            function addListner(){
    $(".listitem").click(function(){
        $(this).css('text-decoration', 'line-through');
    });
    };
});

Answer 6

如果您正在寻找完全封装的“全部清除”功能，请使用：

$('#clear').click(function() {
  $('#list > ul > li').css({
    textDecoration: 'line-through'
  });
});

如果您正在寻找“以便当有人点击特定项目时”在该项目上留下删除线的操作，请使用：

$('#list > ul > li').on('click', function() {
  $(this).css({
    textDecoration: 'line-through'
  });
});

如果你想使用一个类，那么：

$('#list2 > ul > li').on('click', function () {
    $(this).addClass('strike');
});

工作示例：

$('#clear').click(function() {
  $('#list > ul > li').css({
    textDecoration: 'line-through'
  });
});


$('#list > ul > li').on('click', function() {
  $(this).css({
    textDecoration: 'line-through'
  });
});

$('#list2 > ul > li').on('click', function() {
  $(this).addClass('strike');
});

.strike {
  text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <ul>
    <li>First Item</li>
    <li>Second Item</li>
  </ul>
</div>

<div id="list2">
  <ul>
    <li>First Item</li>
    <li>Second Item</li>
  </ul>
</div>

<button type="button" id="clear">Strike Out</button>

详细介绍特定列表项 - jQuery

6 个答案: