我想实现慕课网的效果（课外），我觉得只要稍加修改不报错实现就好，很好奇，还是想老师纠错

1.二维码效果完全没有

2.字与图片切换只有最后一个按钮有效

3.无法实现切换的字都不一样，如果问题二解决了，只能全部换成字“买”

4.如果想第三个按钮点击时二维码与第三个按钮平行，第四个按钮点击时二维码与第四个按钮平行，怎么写代码

5.写代码for循环有多个时，变量是否能全部写成i？（我这里写的都不一样）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        *{margin: 0;padding: 0;}
        body{background-color: blue;}
        .box{position: fixed;padding: 5px 10px;top: calc(50% - 69px);right: 0;background-color: white;}
        .anniu{margin: 10px auto;background-image: url("anniu.jpg");width: 20px;height: 20px;cursor: pointer;
            text-align: center;line-height: 20px;font-size: 14px;}
        .erweima{position: absolute;bottom: 0;right: 40px;background-image: url("erweima.jpg");width: 160px;height: 200px;}
    </style>
    <style>
        .erweima{transform-origin: 100% 100%;transition: all 1s;}
        .erweima_animate_init{opacity: 0;transform: scale(0);}
        .erweima_animate_done{opacity: 1;transform: scale(1);}
    </style>
</head>
 
<body>
    <div class="box">
        <div class="anniu zi1"></div>
        <div class="anniu zi2"></div>
        <div class="anniu zi3"></div>
        <div class="anniu zi4"></div>
        <div class="erweima erweima_animate_init"></div>
    </div>
    <script>
    var shuzu=[".zi1",".zi2",".zi3",".zi4"];
    for(var i=2;i<shuzu.length;i++){
        var target=document.querySelector(shuzu[i]);
        target.onmouseover=function(){
            var erweima=document.querySelector("erweima");
            var classanniu=erweima.getAttribute("class");
            classanniu.setAttribute("class",classanniu.replace('_animate_init','_animate_done'));
        }
    }
    for(var j=2;j<shuzu.length;j++){
        var mubiao=document.querySelector(shuzu[j]);
        target.onmouseout=function(){
            var erweima=document.querySelector("erweima");
            var classanniu=erweima.getAttribute("class");
            classanniu.setAttribute("class",classanniu.replace('_animate_done','_animate_init'));
        }
    }
    for(var d=0;d<shuzu.length;d++){
        var zi=document.querySelector(shuzu[d]);
        zi.onmouseover=function(){
            zi.style.backgroundImage="none";
            zi.innerHTML="买";
        }
    }
    for(var d=0;d<shuzu.length;d++){
        var zi=document.querySelector(shuzu[d]);
        zi.onmouseout=function(){
            zi.style.backgroundImage="url('anniu.jpg')";
            zi.innerHTML="";
        }
    }
    </script>
</body>
</html>

迷失的小麦 2019-12-29

源自：项目：JS实现简易计算器案例 4-2 第二次修改--使用循环

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-12-29 17:19:09

同学你好，课外知识需要自己去拓展延伸，根据课程学习过的知识去实现，这样才能提升技能。另外这些问题都涉及到作用域的问题，给你举了一个修改示例：

 for (var i = 2; i < shuzu.length; i++) {
            (function(i) {
                var target = document.querySelector(shuzu[i]);
                target.onmouseover = function() {
                    var erweima = document.querySelector(".erweima");
                    var classanniu = erweima.getAttribute("class");
                    erweima.setAttribute("class", classanniu.replace('_animate_init', '_animate_done'));
                }
 
                target.onmouseout = function() {
                    var erweima = document.querySelector(".erweima");
                    var classanniu = erweima.getAttribute("class");
                    erweima.setAttribute("class", classanniu.replace('_animate_done', '_animate_init'));
                }
            })(i)
 
        }

这边测试是可以实现二维码显示隐藏效果的，因为没有图片，使用文字代替了：

同学静下心来一点一点的去修改完善，相信自己可以实现的，如果还是存在问题，建议复习一下作用域课程以及后面的练习，对理解也有一定的帮助：

https://class.imooc.com/lesson/788#mid=19788

祝学习愉快！

收起回答

迷失的小麦提问者 #1

老师，我调试出来改变字的效果了，但是根据老师提供的代码，还是无法出来效果，不知道什么原因，打开控制台类名就没有发生变化

2019-12-30 10:03:43
好帮手慕星星回复提问者迷失的小麦 #2

你好，老师在私信中给你解决，可以看一下。

2019-12-30 10:45:22
迷失的小麦提问者 #3

已回复，谢谢老师！

2019-12-30 13:30:25