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

};

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>");
}

};