时间戳

首页 > 解决方案 > 如何移动一个

  • 从一个

    • javascript - 如何移动一个
  • 从一个
      在另一个
        在使用 JQuery 的单独 div 中

    • 问题描述

    所以我有两个容器，其中包含单独ul的 . 我的目标是将其中一个孩子<li>从一个ul转移到另一个。

    我目前使用 jquery 在 ul 中的 li 上有一个删除功能，如下所示：

    //check off specific todos
$("ul").on("click", "li", function(){
    $(this).toggleClass("completed");
});

// x to delete todo /mark as complete
$("ul").on("click", "span", function(event){
    $(this).parent().fadeOut(500, function(){
        $(this).remove();
    });
    event.stopPropagation();
});

//text input
$("input[type='text']").keypress(function(event){
    if(event.which === 13){
        var todotext = $(this).val();
        $(this).val("");
        // create a new LI
        $("ul").append("<li><span><i class='fas fa-trash'></i></span> " + todotext + "</li>");
    }
});


//toggles input box
$(".fa-plus").click(function(){
    $("input[type='text']").fadeToggle();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">



<body>


<div id="container">
    <h1>Task List <i class="fas fa-plus"></i></h1>
    <input placeholder="Add new Task" type="text">

    <ul>
    <li><span><i class="fas fa-check"></i></span> hello</li>
    </ul>
</div>

<div id="container-2">
    <h1>Completed Tasks <i class="fas fa-check-circle"></i></h1>
    
    <ul>
    
    </ul>
</div>


</body>

    我对此真的很陌生，所以只是想个性化一个项目。

    标签： javascripthtmljquery

    解决方案

    您应该将元素附加到目标容器，而不是删除，然后使用fadeIn它再次显示它。

    //check off specific todos
$("ul").on("click", "li", function(){
    $(this).toggleClass("completed");
});

// x to delete todo /mark as complete
$("ul").on("click", "span", function(event){
    $(this).parent().fadeOut(500, function(){
        $(this).appendTo($("#container-2 ul")).fadeIn(500);
    });
    event.stopPropagation();
});

//text input
$("input[type='text']").keypress(function(event){
    if(event.which === 13){
        var todotext = $(this).val();
        $(this).val("");
        // create a new LI
        $("ul").append("<li><span><i class='fas fa-trash'></i></span> " + todotext + "</li>");
    }
});


//toggles input box
$(".fa-plus").click(function(){
    $("input[type='text']").fadeToggle();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">



<body>


<div id="container">
    <h1>Task List <i class="fas fa-plus"></i></h1>
    <input placeholder="Add new Task" type="text">

    <ul>
    <li><span><i class="fas fa-check"></i></span> hello</li>
    </ul>
</div>

<div id="container-2">
    <h1>Completed Tasks <i class="fas fa-check-circle"></i></h1>
    
    <ul>
    
    </ul>
</div>


</body>

    推荐阅读