JQuery父选择器和淡出
[英]JQuery parent selector and fadeout
问题描述
我正在尝试在JQuery中创建一个简单的ToDo列表，但我遇到了一个问题。 我创建了函数'deleteListItem'，我使用它来删除我的列表项：
$(this).parent().remove();
，然后我想将fadeOut效果添加到我的列表中，所以我尝试了：
$(this).fadeOut(1000, function(){
$(this).parent().remove();
})
，但这个fadesOut只是我的删除按钮所以然后我试过
$(this).parent().fadeOut(1000, function(){
$(this).parent().remove();
})
这会消除我所有的'ul'，而不仅仅是'li'元素。 这是我的JSBIN，所以你更好地理解我在做什么： http ：//jsbin.com/ciyufi/edit？html，js，output
2 个解决方案
解决方案1
6 已采纳 2016-12-04 22:33:36
在回调处理程序中， this指的是<li> 。
$(this).parent().fadeOut(1000, function(){
$(this).remove();
})
解决方案2
1 2016-12-04 22:39:21
// This is where I put my functions // This function adds items on our list function addListItem() { var text=$('#newText').val(); // val returns any text thats inside input $('#todoList').append('<li><input type="checkbox" class="done">'+ text +'<button class="delete">Delete</button></li>'); $('#newText').val(''); // this is added so that our input deletes previous text when add is clicked }; // This function deletes items on our list function deleteListItem() { // In order to delete entire list item we have to use parent method > without parent method we would only delete our delete button $(this).parent().fadeOut(1000, function(){ $(this).closest("li").remove(); }) }; // This function adds checked remark on our item list function itemDone() { // First we check if our element has textDecoration="line-through" // If it has it second line deletes it // And our else statement allows as to add it again if ($(this).parent().css('textDecoration') == 'line-through') { $(this).parent().css('textDecoration', 'none'); } else { $(this).parent().css('textDecoration', 'line-through'); } } $ (document).ready(function(){ $('#add').on('click', addListItem); // This is for button to add text // This part enables us to add text on pressing enter key $( "#newText" ).keypress(function( event ) { if ( event.which == 13) { addListItem(); } }); // $('.delete').on('click', deleteListItem); // $('.done').on('click', itemDone); // Lines above don't work because we are adding elements after page loads // In above lines browser didn't bind functions to our new elements because it didn't see them at the time // In order to make it work we add document selector > its not the best solution but i'm not good enough for better // We don't need to do it for #add because its already on page $(document).on('click', '.delete', deleteListItem); $(document).on('click', '.done', itemDone); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>ToDo Lista</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/main.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <section class="container"> <h1>ToDo List</h1> <ul id="todoList"> <li><input type="checkbox" class="done"> Clean House <button class="delete">Delete</button></li> <li><input type="checkbox" class="done">Buy Milk <button class="delete">Delete</button></li> <input id="newText" type="text" placeholder="Write Your Task"><button id="add">Add</button> </ul> </section> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/main.js"></script> </body> </html>
我更喜欢使用closest 。 最近只需更改'deleteListItem'函数即可删除删除时最近的li项。
function deleteListItem() {
// In order to delete entire list item we have to use parent method > without parent method we would only delete our delete button
$(this).parent().fadeOut(1000, function(){
$(this).closest("li").remove();
})
};
元素父选择器上的jQuery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.