个人中心
gpt4 book ai didi

javascript - 我的 jquery 在我的待办事项列表中不起作用

转载 作者：行者123 更新时间：2023-11-28 03:29:01 25 4
gpt4 key购买 nike

我正在尝试使用 jquery 制作一个待办事项列表，但它不起作用请有人告诉我我的代码有什么问题。我的输入工作正常但我的可排序功能、可拖放功能不起作用。这是我的代码..

$(function() {
    
   $('#todoList ul').sortable({
       items: "li:not('.listTitle, .addItem')",
       connectWith: "ul",
       dropOnEmpty: true,
       placeholder: "emptySpace"
       
   });
    
    $('input').keydown(function(e) {
       if(e.keyCode == 13) {
           var item = $(this).val();
           
           $(this).parent().parent().append('<li>' + item + '</li>' ); 
           $(this).val('');
       } 
    });
    
    $('#trash').droppable({
       drop:function(event, ui) {
           ui.draggable.remove();
       } 
    });
});
/* Styles */

body{
    background: #eee;
    margin: 100px;
}

.container {
    position: relative;
    width: 400px;
    margin: 20px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    border: solid 1px #ccc;
    height: 600px;
    overflow: auto;
}


#todoListWrapper {
    width: 960px;
    text-align: center;
}

#todoList:after {
    clear: both;
    display: table;
    content: "";
}

ul {
    width: 48%;
    float: left;
    margin: 0;
    padding: 0 1%;
    list-style: none;
}


ul li:hover {
    background: #ddd;
    border-color: #aaa;
    cursor: pointer;
}

ul li:active{
    transform: rotate(3deg);
}

#todoList ul {
    width: 14.28%;
    margin: 0;
    padding: 0;
    position: relative;
}

#todoList li{
    background: none; 
    padding: 5px;
    border: none; 
    margin: 0; 
    text-align: left;
    font-size: 12px;
}

#todoList li:hover{
    background: #eee;
}

#todoList li.listTitle {
    background: #444;
    color: white;
    padding: 10px;
    text-align: center;
    border-right: solid 1px white;
    font-size: 14px;
}

#todoList li.listTitle:hover,
#todoList li.listTitle:active{
    cursor: default;
    transform: none;
}

#todoList .emptySpace{
    background: #fc3;
    border: dashed 1px #777;
    height: 10px;
}

#todoList li.addItem {
    display: none;
    position: absolute;
    top: 0;
    background: none;
}

#todoList ul:hover li.addItem {
    display: block;
}

#todoList li.addItem input {
    width: 100%;
    padding: 4px;
}

#todoList li.addItem:active {
    transform: none;
}

#trash {
    background: rgba(178,73,38,.7);
    margin:80px 280px;
    display: block;
    position: absolute;
    text-align: center;
    color: white;
    width: 400px;
    height: 200px;
}
<!DOCTYPE html>

<html>
    
    <head>
        
        <title>JQuery To-do List</title>
        
        <link rel="stylesheet" href="normalise.css">
         <link rel="stylesheet" href="dostyle.css">
        
        <link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
                    
    </head>
     
    
    <body>
        
        <div class="container" id="todoListWrapper">
            <h2>JQuery TO-DO List</h2>
           <div id="todoList">
               <ul>
                   <li class="listTitle">Monday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Tuesday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Wednesday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Thrusday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Friday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Saturday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               <ul>
                   <li class="listTitle">Sunday</li>
                   <li class="addItem"><input type="text" placeholder="add new item.."></li>
               </ul>
               
            </div>
            
            <div id="trash" class="container">Drag items to delete</div>
        </div>
        
        
        <!-- Load CDN -->
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        
        <!-- Load local if CDN not available -->
        <script>window.jQuery || document.write('<script src="jquery-3.2.1.slim.js"><\/script>');</script> 
        
        <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
        
        <script type="text/javascript" src="app.js"></script> 
        
    </body> 
    
</html>

最佳答案

您的代码中有错误。包装函数永远不会执行，它是一个匿名函数，您不会立即调用它。如下更改脚本，将其更改为 IIFE。我通过在末尾添加 () 来调用该函数。

$(function() {

   $('#todoList ul').sortable({
       items: "li:not('.listTitle, .addItem')",
       connectWith: "ul",
       dropOnEmpty: true,
       placeholder: "emptySpace"

   });

    $('input').keydown(function(e) {
       if(e.keyCode == 13) {
           var item = $(this).val();

           $(this).parent().parent().append('<li>' + item + '</li>' ); 
           $(this).val('');
       } 
    });

    $('#trash').droppable({
       drop:function(event, ui) {
           ui.draggable.remove();
       } 
    });
})();

关于javascript - 我的 jquery 在我的待办事项列表中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44837007/

25 4 0
文章推荐： html - 如何在 Flex 容器中定位 –THIS–？
文章推荐： c++ - XLC++ 11.1 的奇怪问题
文章推荐： javascript - 如何使用 HTML、CSS 和 JQuery 在圆形设计中创建交互式导航
文章推荐： html - 如何将标题与图片放在html下面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com