Wie ändere ich ein CSS-Element mit Jquery nach dem Anhängen von JQuery an ein div?

Question

Ich mache eine Todo-Liste, also füge ich neue Eingabe-Tags mit Checkboxen hinzu, damit ich ein Aufgaben-Item abhaken kann. Ich habe Probleme beim Ändern der CSS, so dass der Text eine Linie durch es zeigt, wenn es überprüft wird. Die Check-Funktion funktioniert und es läuft, aber ich kann keine Zeile durch das spezifische HTML-Element setzen.

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

EDIT:

Ich vergaß zu erwähnen, dass der Code nicht funktioniert, weil Sie Ihre Klasse mit dem Eingang hinzufügen, die nur die Checkbox Stil beeinflusst nicht den Text danach.

Damit mein Code funktioniert, müssen Sie nur diese Zeile ändern und einen Bereich hinzufügen, um Ihre Aufgabe zu verpacken. Sie brauchen die Änderungsfunktion nicht mehr.

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

---

LÖSUNG:

Sie diese mit einfachen CSS erreichen können mit ausgewählt Pseudo-Klasse und eine Spanne oder andere Tag verwenden, die direkt als Selektor verwendet werden können, nach Ihrer Eingabe :

---

JSFiddle

---

Code-Schnipsel:

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

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