浏览特定的列表项-jQuery

Strike through on specific list item - jQuery

本文关键字：-jQuery 列表 浏览      更新时间：2024-01-29

所以我对使用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>

但是所有的列表项目都会被删除。is在JavaScript中会更好吗？我该如何写它，以便在点击时，如果它有一个点击，它就会取消点击？

问题是因为项目是稍后添加的，所以您需要像这样处理"li"（见下文）

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

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

如果要toggle，则可以使用.toggleClass，style或.css(STYLE)将执行此操作，从匹配元素集中的每个元素添加或删除一个或多个类

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

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

$("#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');
});
.strike {
  text-decoration: line-through;
}
<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>

如果您正在寻找一个完全封装的"清除所有"；功能，用途：

$('#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>

所有列表项都将通过，因为您为id为#list的div指定了.wrap，它包含整个列表（<ul>...</ul>）。

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

为每个附加的li注册一个点击事件。参见代码笔上的示例

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

尝试更改此

$("#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');
    });
    };
});
相关文章：