javascript - 错误的<li>标签行为</li>

问题描述

我正在尝试创建基本的网络“待办事项列表”。问题是，在我手动添加待办事项并单击它们之后，他们只是忽略了“文本装饰：直通；” 而且我看不到穿过我的待办事项框的线。

我将这两个应用与 .lineThrough 类 li 进行了比较，不同之处在于手动添加的 li 会自动应用这些类：

.far {  
li:nth-child(2n) {  
   font-family: 'Font Awesome 5 Free';  
   font-weight: 400;    
}   
.fa, .fas, .far, .fal, .fad, .fab { 
   -moz-osx-font-smoothing: grayscale;  
   -webkit-font-smoothing: antialiased;
   display: inline-block;   
   font-style: normal;  
   font-variant: normal;    
   text-rendering: auto;    
   line-height: 1;

}
user agent stylesheet   
i { 
   font-style: italic;  
   background: white;
}

可能是什么问题呢？

我的 .js 文件：

$("i").on("click",function (){  
    $(this).parent().fadeOut(500,function () {
        $(this).remove();
    });
})


$("ul").on("click","li",function (){
    $(this).toggleClass("lineThrough");    
})


$("#plusBtn").on("click",function(){
    var newTodo = $("#searchBox").val();
    var newTodo = "<li> <i class='far fa-trash-alt'> </i>"+newTodo+"</li>"
    if($("#searchBox").val() != ""){
        $("#toDos").append(newTodo);
        $("#searchBox").val("");
    }
})


$("#searchBox").on("keypress",function(k){ 
    if(k.which == 13){
        var newTodo = $("#searchBox").val();
        var newTodo = "<li><i class='far fa-trash-alt'>"+newTodo+"</i></li>"
        if($("#searchBox").val() != ""){
            $("#toDos").append(newTodo);
            $(this).val("");
        }
    }
})
My .css file

body{
    background-image:linear-gradient(to right, #076585 ,#fff); ;

}

#table{

    width: 350px;  
    margin: 0 auto;
    margin-top: 100px;
    box-shadow: 10px 10px 20px   #79777767;

}
#todoTitle{
    background: rgb(88, 88, 214);
    height: 45px;
    line-height: 50px;
    padding-left: 10px;
    color: whitesmoke;
    font-size: 25px;

}

#plusBtn{
    background: transparent;
    border: 0;
    color: white;
    font-weight: bold;
    font-size: 45px;
    float: right;
    line-height: 45px;
    outline: none;
}

#searchBox{
    width: 100%;
    border: 0;
    padding: 0;
    height: 45px;
    font-size: 20px;
    padding-left: 10px;
    color: gray;
    box-sizing: border-box;
}
#toDos{
    list-style-type: none;
    padding: 0;
    margin: 0;
    
    
}

li{
    padding: 0;
    width: 100%;
    background: rgb(240, 240, 240);
    padding-left: 10px;
    box-sizing: border-box;
    height: 45px;
    line-height: 45px;
    font-size: 25px;
    color: gray;
    
}

li:nth-child(2n){
    background: white;

}

.lineThrough{
    text-decoration: line-through;
    color: rgb(182, 179, 179);
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TO DO LIST</title>
    <link rel="stylesheet" type="text/css" href="tdl_css.css">
    <script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
    <link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
    
    <div id = "table">
       <div id = "todoTitle">TO-DO LIST
            <button id= "plusBtn">+</button>
       </div>
       <input type="text" id = "searchBox" placeholder="Add New Todo"></input>
        
       <ul id="toDos">
        <li> <i class="far fa-trash-alt"></i>safsdfsdf</li>
        <li> <i class="far fa-trash-alt"></i>sasdddsdfsdfsdf</li>
       </ul>


    </div>





    <script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>

标签： javascriptjqueryhtmlcss

解决方案

问题是新值被插入到标签内，而不是<li>像这样的标签<li>Value</li>而不是<li>value</li>.

请在适当的位置插入该值，它将正常工作。这可能是无意的错误，因为对于#plusBtn，您已正确完成但错过了#searchBox。

已经给你修好了。请验证

$("i").on("click",function (){  
    $(this).parent().fadeOut(500,function () {
        $(this).remove();
    });
})


$("ul").on("click","li",function (){
    $(this).toggleClass("lineThrough");    
})


$("#plusBtn").on("click",function(){
    var newTodo = $("#searchBox").val();
    var newTodo = "<li> <i class='far fa-trash-alt'> </i>"+newTodo+"</li>"
    if($("#searchBox").val() != ""){
        $("#toDos").append(newTodo);
        $("#searchBox").val("");
    }
})


$("#searchBox").on("keypress",function(k){ 
    if(k.which == 13){
        var newTodo = $("#searchBox").val();
        var newTodo = "<li><i class='far fa-trash-alt'></i>"+newTodo+"</li>" //Check here fixed
        if($("#searchBox").val() != ""){
            $("#toDos").append(newTodo);
            $(this).val("");
        }
    }
})

body{
    background-image:linear-gradient(to right, #076585 ,#fff); ;

}

#table{

    width: 350px;  
    margin: 0 auto;
    margin-top: 100px;
    box-shadow: 10px 10px 20px   #79777767;

}
#todoTitle{
    background: rgb(88, 88, 214);
    height: 45px;
    line-height: 50px;
    padding-left: 10px;
    color: whitesmoke;
    font-size: 25px;

}

#plusBtn{
    background: transparent;
    border: 0;
    color: white;
    font-weight: bold;
    font-size: 45px;
    float: right;
    line-height: 45px;
    outline: none;
}

#searchBox{
    width: 100%;
    border: 0;
    padding: 0;
    height: 45px;
    font-size: 20px;
    padding-left: 10px;
    color: gray;
    box-sizing: border-box;
}
#toDos{
    list-style-type: none;
    padding: 0;
    margin: 0;
    
    
}

li{
    padding: 0;
    width: 100%;
    background: rgb(240, 240, 240);
    padding-left: 10px;
    box-sizing: border-box;
    height: 45px;
    line-height: 45px;
    font-size: 25px;
    color: gray;
    
}

li:nth-child(2n){
    background: white;

}

.lineThrough{
    text-decoration: line-through;
    color: rgb(182, 179, 179);
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TO DO LIST</title>
    <link rel="stylesheet" type="text/css" href="tdl_css.css">
    <script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
    <link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
    
    <div id = "table">
       <div id = "todoTitle">TO-DO LIST
            <button id= "plusBtn">+</button>
       </div>
       <input type="text" id = "searchBox" placeholder="Add New Todo"></input>
        
       <ul id="toDos">
        <li> <i class="far fa-trash-alt"></i>safsdfsdf</li>
        <li> <i class="far fa-trash-alt"></i>sasdddsdfsdfsdf</li>
       </ul>


    </div>





    <script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>

希望能帮助到你。请回复以进行任何澄清。

javascript - 错误的
标签行为

问题描述

解决方案

推荐阅读

javascript - 错误的标签行为

问题描述

解决方案

推荐阅读

javascript - 错误的
标签行为