个人中心
gpt4 book ai didi

javascript - 如何在javascript中为ul创建一个动态点击事件监听器

转载 作者：行者123 更新时间：2023-11-28 16:22:49 25 4
gpt4 key购买 nike

我有一个包含许多 li 的 ul(无序列表)。 li 是动态创建的。所以点击事件监听需要动态实现。这在 jQuery 中很容易做到； 

$(document).on("click", ".checkboxes", function() {     
   var boxId = $(this).attr("id");
   var num = boxId.split("-")[1];
   console.log("checkbox: "+num);
  // checkedItem(num);
   var checkedLi = document.getElementById("li-"+num);
   checkedLi.style.textDecoration = "line-through";
});

但是，我希望我的应用完全使用 javascript。如果有人可以提供答案。赞赏这是在线应用程序 http://pctechtips.org/apps/todo/inde.html

<!DOCTYPE html>
<html>
<head>
    <title>TodoList App</title>
    <!-- bootstrap cdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">

    <style type="text/css">
        /*variables*/
        :root {
            --righteous-font: 'Righteous', cursive;
        }

        body {
            /*background-color: #536691;*/
            background-image: url("http://pctechtips.org/apps/conf/img/Chicago-Wallpaper-3.jpg");
            min-height: 100vh;
            z-index: -10;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            font-size: 1.3rem;          
        }
        .hero {
            position: absolute;
            min-height: 100vh;
            min-width: 100vw;
            top: 0;
            bottom: 0;
            background-color: rgba(31, 34, 118, 0.5);
        }

        h1 {
            margin-top: 12rem;
            margin-bottom: 0px;
            padding-bottom: 0px;
            font-family: var(--righteous-font);
        }

        .lead {
            font-size: 1.5rem;
            font-family: var(--righteous-font);
        }
        hr {
            margin-top: 2rem;
            border: 1px solid white;
            display: none;
        }
        ul {
            /*border-top: 2px solid white;*/
            margin-top: 2rem;
            list-style: none;
            /*display: none;*/
        }
        li {
            border-bottom: 1px solid white;
            padding: 0.5rem 0 0.5rem 0;
            margin: 0 1rem 0 1rem;
        }
        .checkboxes {
            float: right;
            line-height: 15px;
            width: 17px;
            height: 17px;
            background-color: #e9ecef;
            border: 1px solid #e9ecef;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div class="hero">
        <div class="container">
            <h1 class="display-2 text-center">TodoList</h1>
            <p class="lead text-center">Welcome to my todoList applications</p>
            <div class="row">
                <form id="form" class="col-8 mx-auto">
                    <div class="input-group">
                        <input id="input" class="form-control" placeholder="Enter todo list item" value="this is a todo list item for me todo">
                        <span>
                            <button id="btn" type="button" class="btn btn-primary">Submit</button>
                        </span>
                    </div>               
                </form>
            </div>  
            <hr>        
            <div class="row">               
                <ul id="list" class="list col-8 mx-auto">
                    <!-- <li>this is a todo item <input type="checkbox" class="checkbox"></li>
                    <li>this is a todo item <input type="checkbox" class="checkbox"></li> -->
                </ul>
            </div>

        </div>
    </div>

    <!-- todolist app functionality -->
    <script type="text/javascript">
        window.onload = function() {
            // variables
            var submitBtn = document.getElementById("btn");
            var ul = document.getElementById("list");
            var todoItem = document.getElementById("input");
            var hr = document.getElementById("hr");
            var id = 1;

            //button event listener
            submitBtn.addEventListener("click", addTodoItem);

            //dynamically added checkbox event listener
            $(document).on("click", ".checkboxes", function() {     
                var boxId = $(this).attr("id");
                var num = boxId.split("-")[1];
                console.log("checkbox: "+num);
                // checkedItem(num);
                var checkedLi = document.getElementById("li-"+num);
                checkedLi.style.textDecoration = "line-through";
            }); 


            /* add todo items to list */
            function addTodoItem() {
                console.log(todoItem.value);
                if(todoItem.value === "") {
                    alert("Enter some text!");
                }
                else {
                    if(ul.style.borderTop == "") {
                        ul.style.borderTop = "2px solid white";
                    }                   
                    var li = document.createElement("li");
                    li.id = "li-"+id
                    var text = document.createTextNode(todoItem.value);
                    var checkbox = document.createElement("input");
                    checkbox.id = "checkbox-"+id;
                    checkbox.className = "checkboxes";
                    checkbox.type = "checkbox";
                    li.appendChild(text);
                    li.appendChild(checkbox);
                    ul.appendChild(li);
                    id++;
                }               
                //reset form
                document.getElementById("form").reset();
            }

            /* check item completed */
            function checkedItem(num) {

            }

        }       

    </script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</body>
</html>

最佳答案

由于 jQuery 是 JavaScript，您不需要 jQuery。当窗口加载时，请注意是否单击了您的列表 - 而不是复选框。在事件监听器的回调函数中，检查复选框是否是目标，然后获取这个特定的 li 元素并应用您的 css。

//get list and listen for click on your list
const list = document.getElementById("list");
list.addEventListener("click", function(event) {
  const target = event.target;
  //ignore clicks on anything but checkbox
  if(target.type !== "checkbox") return;
  //apply css here
  target.parentNode.style.textDecoration = "line-through";
});

因为复选框是 li 的子项，而 li 是 ul 的子项，所以点击事件将从 冒泡checkbox 元素添加到您的列表中，使此解决方案成为可能。

在评论中对话后编辑:很高兴我们理解了。

关于javascript - 如何在javascript中为ul创建一个动态点击事件监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48956237/

25 4 0
文章推荐： javascript - anchor 悬停每个 anchor ，除了一个悬停的 anchor 改变颜色
文章推荐： python - 以最快和可扩展的方式从另一个字典创建字典
文章推荐： html - CSS 媒体查询，不会读取第一个代码
文章推荐： html - nth-of-type 或 nth-child 在 chrome 上的工作不同？
行者123
个人简介

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

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