JS点击选中效果-优快云博客

如何通过JS代码完成单击选中事件

之前上课的时候，讨论这个问题。
我们需要做一个练习，练习的内容是，需要对一个列表中的

进行选中，并完成对内容的修改替换删除操作。

如何完成点击事件

这个其实已经有了一个很好的方法，可以直接调用classList,他代替了之前的className,将方法写在了一起，直接调用就好了。

classList

我举一个示例代码：
设置一个checked选择器，显示点击时的样式，我这里设置加黑，下划线；
设置一个 p 标签用于触发点击，当然这个随便什么标签都是可以的。在做列表的时候，可以通过对 ul 标签的子节点调用进而选中 li .


```javascript
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击选中</title>
    <style>
        .checked {
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <div id="choose">选中我就加粗</div>

    <script>
        window.onload = function () {
            var choose = document.getElementById("choose");
            choose.onclick = function () {
                this.classList.toggle("checked");
                //调用这个函数就可以完成
            }

        }
    </script>
</body>

</html>





## className

可以理解为违背封装的classList,没有方法，所以都需要我们去写
给出一个在classList还未出来时，利用className如何实现点击
```javascript
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击选中</title>
    <style>
        .checked {
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <div id="choose">选中我就加粗</div>

    <script>
        window.onload = function () {
            var choose = document.getElementById("choose");
            choose.onclick = function () {
                // this.classList.toggle("checked");
                if (hasClassName(this, "checked")) {
                    removeClassName(this, "checked")
                } else {
                    addClassName(this, "checked");
                }
                //先进性点击判断，若有，则移除，若无，则添加
            }

        }

        // className实现方法，现用classList替代
        //进行拼接
        function addClassName(elem, classname) {
            elem.className += " " + classname;
        }
        //移除
        function removeClassName(elem, classname) {
            var temp = elem.className.split(" ");
            var arr = [];
            for (var a of temp) {
                if (a == classname) {
                    continue;
                } else {
                    arr.push(a)
                }
            }
            elem.className = arr.join(" ");
        }

        function hasClassName(elem, classname) {
            var temp = elem.className.split(" ");
            return temp.includes(classname);
        }
    </script>
</body>

</html>