Javascript 在特定列表项上敲打-jQuery_Javascript_Jquery

Javascript 在特定列表项上敲打-jQuery

javascript jquery

Javascript 在特定列表项上敲打-jQuery,javascript,jquery,Javascript,Jquery,所以我对使用jQuery非常陌生。我已经做了一个非常基本的购物清单与添加项目和清除所有功能。但是我想添加一个点击功能，这样当有人点击一个特定的项目时，他们添加的项目就会点击，就像完成了一样。我试过使用 <body> <div id="header"> <h1>Shopping List.</h1> </div> <div id="header2"> <h2>

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


购物单。
我需要的是：

添加
清楚的
2016
"
$（“#添加一个”）。单击（函数（）{
var值=$（“#名称”）.val（）；
$（“ul”）。追加（“”+值+””；
});
$（“#清除”）。单击（函数（）{
$（“ul”）.empty（）；
});
$（“#列表”）。单击（函数（）{
$（this.wrap（“”）；
});

但是所有列表项都会被删除。用JavaScript会更好吗？

我将如何编写它，以便在单击时，如果它有一个罢工通过，它将取消罢工？

所有列表项都将罢工通过，因为您为id为

的div
指定了.wrap
，它包含整个列表（..
）
相反，您需要为列表中的每个li
元素注册函数
使用文本装饰：线条穿过；
，定义穿过文本的线条
如果您想切换可以使用样式或。css（样式）
可以从匹配元素集中的每个元素添加或删除一个或多个类
HTML
标记。HTML5不支持。
注意：用于li（动态）
元素，因为它们是您的目标元素，而不是父UL
元素

$（“#添加一”）。单击（函数（）{
var值=$（“#名称”）.val（）；
$（“ul”）。追加（“”+值+””；
});
$（“#清除”）。单击（函数（）{
$（“ul”）.empty（）；
});
$（“#列表”）。在（'click'，'li'，function（）上{
//-------^^---------^^^^^//.on方法用于绑定动态元素上的事件
$（this.toggleClass（'strike'）；
})；
.strike{
文字装饰：线条贯通；
}

购物单。
我需要的是：

添加
清楚的
2016为您附加的每个li注册一个点击事件。

HTML:

购物单。
我需要的是：

添加
清楚的
2016
问题是因为项目是在以后添加的，所以您需要像这样处理“li”（见下文）
$（“#列表”）。在（“单击”，“li”，函数（）上）{
$（this.wrap（“”）；
});
尝试更改此选项
$("#addOne").click(function() {
        var value = $("#name").val();
        $("ul").append("<li>" + value + "</li>");
        });
    $("#clear").click(function(){
        $("ul").empty();
    });

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

$（“#添加一”）。单击（函数（）{
var值=$（“#名称”）.val（）；
$（“ul”）。追加（“”+值+””；
});
$（“#清除”）。单击（函数（）{
$（“ul”）.empty（）；
});
$（“#列表”）。单击（函数（）{
$（this.wrap（“”）；
});

到
$（函数（）{
$（“#添加一个”）。单击（函数（）{
var值=$（“#名称”）.val（）；
$（“ul”）。追加（“”+value+””；
addListner（）；
});
$（“#清除”）。单击（函数（）{
$（“ul”）.empty（）；
});
函数addListner（）{
$（“.listitem”）。单击（函数（）{
$（this.css（'text-decoration'，'line-through'）；
});
};
});
你大声喊出文本装饰：行通过；
但更重要的是，你处理的是
上的点击，而OP处理的是
上的点击，这几乎在你的回答中消失了。有些人可能根本没有注意到。另一个好的观点是“li”“原始html中缺少structure@vtz，li
元素正在动态追加！是的，我的观点是，这就是为什么.click（）在原始帖子中不起作用，即使元素被捕获（“列表li”）P.S@RayonDabre我对你的答案发表评论，因为没有提到：）这是all@vtz，谢谢你的指点！很多时候，我确实错过了关键点；）“我该如何编写它，以便在单击时，如果它有一个删除，它将取消删除？”：而不是.wrap（“”
或.css（'text-decoration'，line-through'）
我会使用.toggleClass（'purchased'）
这样，如果不存在购买的类，就会添加该类，如果已经存在，就会删除该类-然后使用styleli.purchased{text decoration:line through；}
哦，这也很好，很简单：D cheers效果非常好：D@StephenP理想：D为此干杯！如果再次单击，是否有一个简单的解决方案来删除罢工，或者这是一个if-else语句；说真的，不要使用
。。。罢工是不赞成的；html5使用，正如上面所说的，它用于“不再准确的内容”@L按钮您的单击有一个含义：“我购买了这个”或“它在我的购物车中”，所以使用一个类来表示该状态，正如我对问题的评论一样。然后决定你想要怎样的风格。。。可能穿透，可能背景颜色改变。重要的是您已经“完成”了该项的信息。@lmutton，Rayon的装饰将与class和jquery切换一起工作，搜索它，顺便说一句，很好Stephen@lmutton注意我是如何为ul执行选择的吗？如果您的页面上有许多ul标签，那么您需要明确选择哪个ul。干杯
.strike-through{
  text-decoration: line-through;
}

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

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

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