如何使用 jQuery 创建待办事项列表？

本文侧重于开发具有一些基本功能的待办事项列表，例如：

1. 添加任务
2. 删除任务
3. 交叉完成的任务

先决条件：
使用 HTML、CSS、JS、jQuery 和 Bootstrap-3 进行前端开发的基本知识。脚步：

1. 初始化布局：
   – 添加带有按钮的输入文本框以将任务添加到主列表。
   – 我们将使用一些 CSS 位置固定属性将包含上述内容的容器设置为固定在按钮上。
   – 现在我们将添加要添加任务的容器。

   以下是代码以及对上述内容的解释：

   
   
   
   

     
   
       
       
       
       
     
       
     
       
     
     
       
           .container {
               width: 90%;
               height: auto;
           }
             
           .foot {
               position: fixed;
               left: 10%;
               bottom: 0;
               width: 80%;
               text-align: center;
           }
       
     
   
     
   
       
     
           
               
                      
                   
                       
                       
                           
                           
                               
                                 
                                 
                           
                       
                       
                       
                   
               
           
     
           
           
           My Tasks:
           
     
           
               
           
     
       
   
     

2. 添加任务的 jQuery 脚本：
   现在我们将添加 jQuery 代码，以便我们可以在待办事项列表中添加任务。这里我们使用了 Bootstrap警报类来添加任务容器。
   • 单击任务右侧的十字按钮将永久删除该任务。
     （警报具有该属性，否则我们还必须实现删除脚本）。

   以下是代码以及对上述内容的解释：

     
   
       
       
       
     
       
     
       
     
       
           .container {
               width: 80%;
               height: auto;
           }
             
           .foot {
               position: fixed;
               left: 10%;
               bottom: 0;
               width: 80%;
               text-align: center;
           }
       
     
   
     
   
       
     
           
               
                      
                   
                       
                       
                           
                           
                               
                                 
                                 
                           
                       
                       
                       
                   
               
           
     
           
           My Tasks:
           
     
           
           
     
       
       
           $(document).ready(function() {
               $('.btn-success').click(function() {
                   // If something is written
                   if ($('#text').val().length != 0) {
                       //Store previous data
                       var x = $('.container').html();
     
                       // Add typed text in alert container
                       var y = 
            `<div class="alert alert-success alert-dismissible fade in">
   <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                     ` + $('#text').val() + `</div>`;
     
                       //Update
                       $('.container').html(y + x);
                       //Clear after addition
                       $('#text').val("");
                   } else alert("Enter some Text!");
               });
           });
       
   
     

3. 指示已完成任务的脚本：
   最后，我们将添加脚本以实现这样的功能：每当我们单击任务时，它都会被交叉，如果已经完成，将恢复回来。
   为了穿越任务，我们将使用 CSS 中的text-decoration-line : line-through 属性。

最终解决方案：

  

    
    
    
  
    
  
    
  
    
        .container {
            width: 80%;
            height: auto;
        }
          
        .foot {
            position: fixed;
            left: 10%;
            bottom: 0;
            width: 80%;
            text-align: center;
        }
    
  

  

    
  
        
            
                   
                
                    
                    
                        
                        
                            
                              
                              
                        
                    
                    
                    
                
            
        
  
        
        My Tasks:
        
  
        
        
  
    
    
        $(document).ready(function() {
            $('.btn-success').click(function() {
                if ($('#text').val().length != 0) {
                    var x = $('.container').html();
                    var y = 
          `<div class="alert alert-success alert-dismissible fade in">
     <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                           ` + $('#text').val() + `</div>`;
                    $('.container').html(y + x);
                    $('#text').val("");
                } else alert("Enter some Text!");
            });
            // When Task is clicked
            $(document).on('click', '.alert', function() {
                if ($(this).css('text-decoration-line') == "none")
                    $(this).css('text-decoration-line', 'line-through');
                else
                    $(this).css('text-decoration-line', 'none');
            });
        });
    

  

输出：
添加任务前：

添加任务后：