我正在制作一个简单的待办事项列表，我在下面发布了代码，以便您可以运行它并查看我正在谈论的内容。
我希望能够点击h1内的心形图标并切换待办事项列表“text”输入。
我几乎肯定我的代码是正确的，但显然不是因为，点击心脏图标什么都不做。 我通过cdn和字体awesome 5使用jQuery 3.2.1。
我尝试选择fa-heart图标并给它一个参数，当点击它来切换文本输入的淡入淡出i / o时。它不起作用，我不知所措。任何帮助将不胜感激
// Check Off Specific Todos By Clicking
$("ul").on("click", "li", function() {
$(this).toggleClass("completed");
});
//Click on X to delete Todo
$("ul").on("click", "span", function(event) {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event) {
if (event.which === 13) {
//grabbing new todo text from input
var todoText = $(this).val();
$(this).val("");
//create a new li and add to ul
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")
}
});
$(".fa-heart").click(function() {
$("input[type='text']").fadeToggle();
});#container {
width: 360px;
margin: 100px auto;
background: #d4d1ca;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
h1 {
background: #abc3a8;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto Mono', monospace;
background: #abc3a8/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #c9b7b3, #97a794);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #c9b7b3, #97a794);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
li {
background-color: #c9b7b3;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n) {
background-color: #d4d1ca;
}
input {
font-size: 18px;
color: #abc3a8;
background-color: #d4d1ca;
width: 100%;
padding: 13px 13px 13px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 3px rgba(0, 0, 0, 0);
}
input:focus {
background-color: #d4d1ca;
border: 3px solid #abc3a8;
outline: none;
}
.fa-heart {
float: right;
}
span {
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Honey-do List</title>
<script type="text/javascript" src="assets/js/lib/jquery-3.2.1.min.js">
</script>
<link rel="stylesheet" href="assets/css/honeyDew.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script>
</head>
<body>
<div id="container">
<h1>Honey-do List <i class="fas fa-heart"></i></h1>
<input type="text" placeholder="New Honey Do!">
<ul>
<li><span><i class="fa fa-trash"></i></span> Go get Milk</li>
<li><span><i class="fa fa-trash"></i></span> Take the dogs out</li>
<li><span><i class="fa fa-trash"></i></span> Buy flowers</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/honeyDew.js"></script>
</body>
</html>
答案 0 :(得分：0)
将div放在你的图标周围
点击事件不适用于 标记
Honey-do List 的
// Check Off Specific Todos By Clicking
$("ul").on("click", "li", function() {
$(this).toggleClass("completed");
});
//Click on X to delete Todo
$("ul").on("click", "span", function(event) {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event) {
if (event.which === 13) {
//grabbing new todo text from input
var todoText = $(this).val();
$(this).val("");
//create a new li and add to ul
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")
}
});
$(".fa-heart").click(function() {
alert('test');
});#container {
width: 360px;
margin: 100px auto;
background: #d4d1ca;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
h1 {
background: #abc3a8;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto Mono', monospace;
background: #abc3a8/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #c9b7b3, #97a794);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #c9b7b3, #97a794);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
li {
background-color: #c9b7b3;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n) {
background-color: #d4d1ca;
}
input {
font-size: 18px;
color: #abc3a8;
background-color: #d4d1ca;
width: 100%;
padding: 13px 13px 13px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 3px rgba(0, 0, 0, 0);
}
input:focus {
background-color: #d4d1ca;
border: 3px solid #abc3a8;
outline: none;
}
.fa-heart {
float: right;
}
span {
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Honey-do List</title>
<script type="text/javascript" src="assets/js/lib/jquery-3.2.1.min.js">
</script>
<link rel="stylesheet" href="assets/css/honeyDew.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script>
</head>
<body>
<div id="container">
<h1>Honey-do List <div class="fa-heart"><i class="fas fa-heart"></i></div></h1>
<input type="text" placeholder="New Honey Do!">
<ul>
<li><span><i class="fa fa-trash"></i></span> Go get Milk</li>
<li><span><i class="fa fa-trash"></i></span> Take the dogs out</li>
<li><span><i class="fa fa-trash"></i></span> Buy flowers</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/honeyDew.js"></script>
</body>
</html>