Question

我正在做作业的任务清单。问题是，我已经完成了代码，但是存在一些问题。特别是当我需要单击完成的任务并显示选中的图标时。希望发生的事情是，我单击并在每个

中显示选中的图标，而我只需要在特定的

中显示。另一件事是，选中图标的行为不正确。它应该是内联的，位于任务名称的前面，但是当我单击时会下降，我知道这一定是因为display：块。有什么办法可以解决这个问题？

先谢谢了。 ps-您能否评论我做错了什么以及我能做得更好的方法，而不仅仅是给我解决方案？我正在学习，所以我真的需要了解。谢谢=）`

<!doctype html>
<html>
    <head>
        <title>Curso Javascript Completo 2018</title>
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <style>
            
            body,html{
                margin:0;
                padding:0;
                height:100%;
            }
          
            .list{
               background-color: white;
               border:2px solid #87bfa5;
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               padding:20px;
                
            }
            
            h1{
              font-family: 'Open Sans', sans-serif;  
            
            }
            
            ul{
               font-family: 'Open Sans', sans-serif; 
                list-style-type: none;
                text-align: left;
                padding:0;
            }
            
            li{
                padding: 10px 20px;
                border:3px solid #87bfa5;
                margin:10px 0px ;
                border-radius:3px ;
                border-radius:10px ;
            }
            
            i.fa-times,i.fa-check{
                
                clear:left;
                padding:0px 10px;
            }
            
            i.fa-times{
                color:red; 
                clear:left;
                float:right;
            }
            
            i.fa-check{
                color:green; 
           
            }
            
            input{
                padding:10px 0px;
                background-color:#87bfa5;
                color:white;
                border-style: none;
            }
            
            button{
                padding:0px 20px;
                border-style: none;
                background-color:#0c9a99;
                color:white;
                font-family: 'Open Sans', sans-serif; 
                font-size:14px;
                line-height: 36px;
                
            }
            
            .done{
                text-decoration: line-through;
                color:#555;
            }
            
        </style>
    </head>
    <body>
     
        <section class="list">
            <h1>LISTA DE TAREFAS</h1>
            <ul>
              <li>Estudar JavaScript<i class="fas fa-check"></i><i class="fas fa-times"></i></li>
              <li>Aprender a usar o Git Hub<i class="fas fa-check"></i><i class="fas fa-times"></i></li>
              <li>Rever a matéria de Frontend<i class="fas fa-check"></i><i class="fas fa-times"></i></li>
            </ul>
 
            <input type ="text" id ="txtTask">
            <button id ="btn">ACRESCENTAR TAREFA</button>
            
        </section>
        
 
    <script>
        
        (function(){
            
           'use strict'
           
             
             
             var $ul = document.querySelector('ul');
             var $lis = document.querySelectorAll('li');
             var $cross = document.querySelectorAll("i.fa-times");
             var $checked = document.querySelectorAll("i.fa-check ");
             var $text = document.getElementById("txtTask");
             var $button =document.getElementById("btn");
        
             
            
            function displayNone(){
                for(var x = 0; x<$checked.length;x++){
               $checked[x].style.display ="none"; 
                }; 
            }
            displayNone()
            
            
            $button.addEventListener('click', acrescentaTarefa);
            $text.addEventListener('keyup', enterTarefa);
            $ul.addEventListener('click', clicarIcons);
            
          
            
            function enterTarefa(e){
             
                if(e.keyCode=== 13){
                    acrescentaTarefa();
                }
            };
          
            function acrescentaTarefa(){
                
                
                var li = document.createElement('li');
               
                var text = document.createTextNode($text.value);
               
                var icon1 = document.createElement('i');
                
                icon1.className = "fas fa-times" ;
                
                var icon2 = document.createElement('i');
                
                icon2.className = "fas fa-check" ;
 
                li.appendChild(text);
              
                li.appendChild(icon1)
              
                li.appendChild(icon2)
               
                $ul.appendChild(li);
      
               icon2.style.display ="none"; 
       
               $text.value = ''; 
               
               $text.focus();
                
            };
            
            function clicarIcons(e){
                
                if(e.target.nodeName === 'LI'){
                   checkTask(e.target) 
                }
                
                if(e.target.className === 'fas fa-times'){
                   
                     removeTask(e.target.parentNode);
                   }
                    
                };
            
            // I think the problem is here
            function checkTask(){
            
               displayNone();
               for(var x = 0; x<$checked.length;x++){
               $checked[x].style.display ="block"; 
                }; 
          
            };
            
            function removeTask(li){
                if(confirm("Do you wish to remove this task?")){
                   li.parentNode.removeChild(li);
             
                }
            };

        })();
        
      </script> 
    </body>
</html>

`

任务列表-单击完成的任务，我需要显示从该任务中选中的图标

0 个答案: