Hjälp med jQUERY.
Hej!
Skriver för en familjemedlems räkning, denne har ej medlemskap här.
En enkel köplist/todo list är skapad i jquery. Enda som fattas är att få texten att ändra färg eller få line-through efter att man checkat i boxen.
Kan någon ge tips. Koden är som följer.
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min..."></script>
<script src="koplistany.js"></script>
</head>
<title>Köplista</title>
<body>
<div class = "container">
<div class = "row">
<div class = "col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3">
<div class="page-header">
<h1>Köplista.</h1>
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="newTodo" placeholder="Mjölk">
</div>
<button type="button" id="addItem" class="btn btn-success">Lägg till</button>
</div>
</form>
</div>
<ul id = "todos">
</ul>
</div>
</div>
</div>
</body>
</html>[/i]
java
$(document).ready(function(){
$('#addItem').on('click', addItem);
$('#newTodo').on('keypress', function(event){
if(event.which === 13) {
addItem();
event.preventDefault();
}
});
function addItem(event) {
var newTodoText = $('#newTodo').val();
$('#todos').append('<li><input class = "completeItem" type = "checkbox">' + newTodoText + '</li>');
$('#newTodo').val("");
}
});
