📌  相关文章
📜  如何使用 jQuery 创建待办事项列表?

📅  最后修改于: 2021-11-25 04:19:22             🧑  作者: Mango

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

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

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

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

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

    
    
    
      
    
        
        
        
        
        
        
      
        
      
    
      
    
        
               
                
                    
     
                    
                                             
                                                     
                                                         
                        
                        
                        
                    
                
            
                        
            

    My Tasks:

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

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

    
    
    
      
    
        
        
        
        
        
      
        
      
    
      
    
        
               
                
                    
     
                    
                                             
                                                     
                                                         
                        
                        
                        
                    
                
            
               
            

    My Tasks:

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

最终解决方案:




  

    
    
    
    
    
  
    
  

  

    
           
            
                
 
                
                                         
                                                 
                                                     
                    
                    
                    
                
            
        
           
        

My Tasks:

        
           
        
       
       

输出:
添加任务前:

添加任务后: