zoukankan      html  css  js  c++  java
  • 点击此块颜色变化,其他块恢复颜色的原生js代码

    <script>
        window.onload=function (){
            var pic=document.getElementById("pic")
            var order=document.getElementsByClassName("order");
            var orderLi=$(".order li");//这个是用jquery获取的,
            for(i=0;i<orderLi.length;i++) {//遍历处理,对于每个块都有onclick函数
           
                  orderLi[i].onclick = function () {
                        for(i=0;i<orderLi.length;i++){//在点击事件中再加载一个遍历,当点击事件触发时,先让其他元素的颜色保持不变
                            orderLi[i].style="background-color:aliceblue";
                        }
                        this.style="background-color:red";//为什么要用this,而不是orderLi[i],要点击的事件块发生颜色变化,同时上一步使得其他的块颜色保持不变,这就让上一次点击变化
    //的颜色恢复到原来的颜色 } } } </script>

      js处理点击其中一块,仅仅这一块颜色发生变化的原生js原理:

    1,遍历,给每一个块添加一个onclick点击事件

    2,点击之后,我们要做什么?(1):给点击的块添加颜色

    (2),其他的块恢复颜色;::;;;,再添加一个遍历,给所有的元素恢复到原来,恢复后,后面添加对点击的块一个background

     ,,点击按钮,翻页的原生js代码

    <script>
        window.onload=function (){
            var pic=document.getElementById("pic")
            var order=document.getElementsByClassName("order");
            var orderLi=$(".order li");
                for(i=0;i<orderLi.length;i++){
                    orderLi[i].index=i; //将i赋给orderLi[i]的index属性
                    orderLi[i].onclick = function () {
    
                        for(i=0;i<orderLi.length;i++){
                            orderLi[i].style="background-color:aliceblue";
                        }
                        this.style="background-color:red";//为什么要用this,而不是orderLi[i]
                        pic.style.top=(-100)*this.index+"px"; //调用this的index
                    }
                }
        }
    </script>
    

      

  • 相关阅读:
    iOS 调试心得
    一步一步带你安装史上最难安装的 vim 插件
    20 行代码极速为 App 加上聊天功能
    在通知栏上玩游戏,Steve iOS 游戏实现思路
    ThinkPHP 3.2.x 集成极光推送指北
    MkDocs 文档生成逻辑浅析
    极光推送的角标问题
    聊天界面-自适应文字
    Python3.7源码包编译安装
    Navicat远程连接MySQL数据库
  • 原文地址:https://www.cnblogs.com/qianduangaoshou/p/6504599.html
Copyright © 2011-2022 走看看