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>
    

      

  • 相关阅读:
    Django和flask中使用原生SQL方法
    UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in
    Docker常用命令
    MySQL的压力测试
    使用docker-compose快速搭建PHP开发环境
    Docke如何配置Nginx和PHP
    Docker容器的重命名和自动重启
    docker部署MySQL、Redis和Nginx
    docker-compose的安装卸载以及如何使用
    docker如何制作自己的镜像
  • 原文地址:https://www.cnblogs.com/qianduangaoshou/p/6504599.html
Copyright © 2011-2022 走看看