博客

我们要实现的效果就是，鼠标点击上面的三个字，首先字体的背景发生改变，下面的照片也需要改变，所以我们就需要获取点击文字的下标，更改照片的下标

html样式

<section>
        <aside class="bg">小猪</aside>
        <aside>小狗</aside>
        <aside>星星</aside>

        <div class="as"><img src="images/img1.jpg"></div>
        <div><img src="images/img2.jpg"></div>
        <div><img src="images/img3.jpg"></div>
 </section>

css

        section {
            display: flex;
            width: 40%;
            justify-content: center;
            margin: 0 auto;
        }

        aside {
            width: 33%;
            text-align: center;
            font-size: 50px;
        }

        .bg {
            background: pink;
        }

        div {
            width: 40%;
            margin: 0 auto;
            position: absolute;
            top: 150px;
            display: none;
        }

        .as {
            display: block;
        }

js  首先获取元素

第一步，清除所以aside class名，给点击的aside添加class名

     //获取元素
        var asides = document.querySelectorAll('aside')
        var img = document.querySelector('img')
        var divs = document.querySelectorAll('div')
        //循环遍历每个aside
        for(var i = 0;i<asides.length;i++){
            //给遍历之后的每一个aside添加点击事件
            asides[i].addEventListener('click',function(){
                //遍历aside，清除掉aside里面的class属性
               for(var j = 0;j<asides.length;j++){
                   asides[j].className=''
               }
            //    给点击的aside添加.bg  class名
               this.className='bg'
            })
           
        }

第二步：获取索引号  （下标）

不能直接再循环里边把   ‘i’  当做下标， 循环中点击事件，这个事件已经运行完了， 所以我们在  ‘i’   能用的时候，我们给所有的aside添加属性 ，值是下标

     for(var i = 0;i<asides.length;i++){
   //在循环执行前 给aside 添加属性 ，值就是下标        -----------新添加
            asides[i].index=i
            asides[i].addEventListener('click',function(){     
               for(var j = 0;j<asides.length;j++){
    //执行前也将divs变成不可见，只有点击的时候变成可见    -----------新添加
                   divs[j].style.display='none'
                   asides[j].className=''
               }
               this.className='bg'
    //我们就获取到aside的索引号，也就是divs的索引号，    -----------新添加
               divs[this.index].style.display='block'
            })
           
        }

第二种办法，我们之所以不能用  i  ， 因为当前作用域中没有定义过  i  ，里面寻找 i 会找到全局中去，而全局中的  i 已经是3 了，所以我们为了不让 i  跑到全局中去  我们可以设置 一个函数 ，里面声明一个变量 i

    for(var i = 0;i<asides.length;i++){
            //我们声明一个函数在循环的下面 给实参 i 和形参 a  然后声明变量 i 将 a 赋值给 i 
            (function(a){
            //将 a 赋值给 i 
                var i=a;
            // asides[i].index=i
            asides[i].addEventListener('click',function(){
               for(var j = 0;j<asides.length;j++){
                   divs[j].style.display='none'
                   asides[j].className=''
               }
               this.className='bg'
            //    divs[this.index].style.display='block'
               divs[i].style.display='block'
            })
        })(i)
           
        }