js自定义属性

最新推荐文章于 2025-04-28 01:00:00 发布

原创最新推荐文章于 2025-04-28 01:00:00 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #引出对自定义属性的需要

本文探讨了如何在JavaScript中为多个元素设置点击事件，实现点击时元素样式的变化，并通过自定义属性解决多次点击的问题。文章详细介绍了使用this关键字解决作用域问题的方法，以及如何通过一个标志变量控制样式的切换。

Document

<ul>
    <li class="block">学习</li>
    <li>减肥</li>
    <li>少聊天</li>
</ul>


<script>
    var uls = document.querySelectorAll("ul");
    var lis = uls[0].getElementsByTagName("li");

    /*我要做点击事件，三个li但是有三个点击事件
    ，这个for循环是为了遍历点击事件，减少代码重复*/
    var flag = true;
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {

            //接下来是，我点击事件我要做什么？一西列的点击效果在这里面
            //点上去的li  宽高变大  而且需要变色！！
            // lis[i].className = "block";
            /* 我这样敲代码console报错！找不到lis【i】  在此处我们需要注意
        函数的环境是独立的，外界的lis[i]并不能顺着作用域链进入函数
        这里使用this 可以将lis【i】引入函数中使用！！！！！！
    */
            // this.className = "block";
            //    写到这里上面的问题被解决。

            //我的事件不仅仅是点击后block，再点击时还要会  none  即 this.className = "";
            //因此这里涉及一个判断！
            /*
            我可以写的麻烦一点：方案一  （不绕脑子）
            也可以写的简单一点 ，方案二 （绕脑子）
            */
            //   方案一 如下  （不绕脑子）====================================在for循环的点击事件中判断
            // if(this.className == "block"){
            //         this.className = "";

            // }else{
            //     this.className = "block";
            // }
            //试一下效果 非常独立的完成效果

            //   方案二 如下  （不绕脑子）====================================在for循环的点击事件中判断  
            // 我们多设置一个变量值 用于if中的条件判断     var flag="true"; 应该把这个放在for循环外面 我写到36行处
            //我的自定义属性没有学好
            if (flag) {
                // 注意if条件内部要写成flag  别傻乎乎写成了TRUE！！！！
                this.className = "";
                flag = false;

            } else {
                this.className = "block";
                flag = true;
            }

            /*
            这样写还是e产生了一个问题！：我点完一个盒子block后   再点击其他盒子想要让它block  必须点击两次
            效果不尽人意-----》自定义属性(我感慨学习js就好像再看一个大型连续剧一样)
            
            */




        }



    }



</script>