javascript - 在将 Jquery 附加到 div 后，如何使用 Jquery 修改 css 元素？

Question

我正在制作一个待办事项列表，因此我添加了带有复选框的新输入标签，这样我就可以勾选待办事项列表项。我在修改 css 时遇到问题，以便文本在选中时显示一条线。检查功能有效并运行，但我无法在特定的 html 元素中插入一行。

var add = function() { 
var task = $("#taskTextBox").val(); // references the value inside #task
if(task != ""){
    inc++;
    var itemName = "item" + inc;

    var newObj = $("#list").append("<input id="+itemName+" type=checkbox class="+itemName+">"+task+"<br></br>");// makes a new <p> element
    $("#taskTextBox").val(""); // empties out #task
    var newHeight = $("#list").height() + 40;
    $("#list").css({"height": newHeight});
    addAttributes();


$("input[class=" + itemName + "]").change(function () {
    if ($(this).prop("checked")) {

    $("input[class=" + itemName + "]").css({'text-decoration': 'line-through'});

    } else{
        $("#list").css({"text-decoration":  "none"});
    }
}); 
}};

Answer 1

编辑:

我忘了提及您的代码无法正常工作，因为您将类添加到输入中，这只会影响复选框样式而不影响其后的文本。

要使我的代码正常工作，您只需修改这一行，添加一个 span 来包装您的任务。您不再需要更改功能。

var newObj = $("#list").append("<input id="+itemName+" type=checkbox class="+itemName+"><span>"+task+"</span><br></br>");// makes a new <p> element

---

解决方案:

您可以使用纯 CSS 使用 :checked 伪类并使用 span 或任何其他可在输入后直接用作选择器的标记来实现此目的:

---

JSFiddle

---

代码片段:

.example:checked + span {
  text-decoration: line-through;
}

<input class="example" type="checkbox"><span>Eggs</span>
<input class="example" type="checkbox"><span>Milk</span>