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

<强> SOLUTION：

你可以使用普通的CSS实现这个：checked伪类，并使用span或任何其他可以直接用作输入的选择器的标记：

JSFiddle

CODE SNIPPET

＆＃13;
＆＃13;
.example:checked + span { text-decoration: line-through; }
＆＃13;
<input class="example" type="checkbox"><span>Eggs</span> <input class="example" type="checkbox"><span>Milk</span>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案: