javascript - 将文本动态添加到列表后，如何更改文本（编辑其内容或类）

Question

我有一个页面，用户可以在其中列出列表。他们通过将字符串输入到输入框中然后单击按钮将该字符串添加为列表项来执行此操作。当我单击一个时，如何更改这些列表项的类别以在文本中划线？或编辑列表项的内容？

我也尝试了 $('li').toggleClass("finishedItem") 而不是 'p' 并且没有任何变化我不确定我做错了什么，感谢任何帮助。

$(document).ready(function () {
 addText();
 $('p').onclick = markComplete();
});
const $addBtn = $("#add");
const $newItemList = $('ul');
const $inputBox = $('input');

const addText = function () {
$addBtn.on("click", function () {
    addLI();
});
};
const addLI = function () {
if($inputBox.val()!=="")
{
    $newItemList.append("<li>" +"<p>"+ $inputBox.val() +"</p>" + " 
</li>");
}

};
const markComplete = function(){

$('p').toggleClass("finishedItem")

};

标签： javascriptjqueryhtml

Answer 1

$(document).ready(function () {
 addText();

});
const $addBtn = $("#add");
const $newItemList = $('ul');
const $inputBox = $('input');

const addText = function () {
$addBtn.on("click", function () {
    addLI();
});
};
const addLI = function () {
if($inputBox.val()!=="")
{
    $newItemList.append("<li>" +"<p onclick=\"$(this).attr('class', 'finishedItem');\">"+ $inputBox.val() +"</p>" + " 
</li>");
}

};