ساخت لیست کارها با jQuery: راهنمای گام به گام
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
<pre><code> h1 {
text-align: center;
color: #2e86c1;
}
form {
margin: 20px auto;
padding: 10px;
background-color: white;
border-radius: 5px;
width: 50%;
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
input[type='text'] {
padding: 5px;
width: 70%;
border-radius: 3px;
border: none;
margin-right: 5px;
}
input[type='submit'] {
padding: 5px;
border-radius: 3px;
border: none;
background-color: #2e86c1;
color: white;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
margin: 0;
background-color: white;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
color: #2e86c1;
font-size: 18px;
}
li:last-child {
border-bottom: none;
}
.completed {
text-decoration: line-through;
color: #ccc;
}
.delete {
float: right;
color: #e74c3c;
cursor: pointer;
}
</style>
</code></pre>
</head>
<body>
<h1>To-Do List</h1>
<form>
<input type='text' id='item' placeholder='Add New Item...'>
<input type='submit' value='Add'>
</form>
<ul id='list'></ul>
<pre><code><script>
// Add Item to List
$('form').submit(function(e){
e.preventDefault();
var item = $('#item').val();
if(item){
$('#list').append('<li>'+ item +'<span class='delete'>X</span></li>');
$('#item').val('');
}
});
// Mark Item as Completed
$(document).on('click', 'li', function(){
$(this).toggleClass('completed');
});
// Delete Item from List
$(document).on('click', '.delete', function(){
$(this).parent().remove();
});
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/lJoz 著作权归作者所有。请勿转载和采集!