经典面试题：点击图片进行两张图片切换

最新推荐文章于 2023-08-21 13:55:36 发布

stones4zd

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量1k

点赞数 4

分类专栏：面试文章标签：面试 JavaScript

本文链接：https://blog.csdn.net/weixin_42703239/article/details/103106717

版权

面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

题目：

有两张图片，一张黑白，一张彩色。点击图片，黑白切换成彩色图，再点击彩色切换成黑白图。

解决方法一：利用一个变量统计奇偶点击数。

<img id="pic" src="images/1.jpg" width="526" height="390" alt=""/>

<script>
{
    let pic = document.getElementById("pic");
    let i = 1;
    let changePic = function(){
        i++;
        if( i%2 === 0 ){
            this.src = "images/2.jpg";
        }else{
            this.src = "images/1.jpg";
        }
    };
    pic.addEventListener("click" , changePic );
}
</script>

方式二：结合数组，用数组把相关图片统一管理起来。

<img id="pic" src="images/1.jpg" width="526" height="390" alt=""/>

<script>
{
    let pic = document.getElementById("pic");
    let arr = ["images/1.jpg" , "images/2.jpg"];
    let i = 0;
    let changePic = function(){
        i++;
        this.src = arr [ i%2 ] ;
    };
    pic.addEventListener("click" , changePic );
}
</script>

方式三：结合自定义属性，利用一个自定义属性 data-i 来存储点击的次数。

<img id="pic" src="images/1.jpg" width="526" height="390" data-i="0" alt=""/>

<script>
{
    let pic = document.getElementById("pic");
    let arr = ["images/1.jpg" , "images/2.jpg"];
    let changePic = function(){
        let i = Number( this.getAttribute("data-i"));  // 获取当前的次数
        i++;
        this.setAttribute("data-i",i);
        this.src = arr [ i%2 ] ;
    };
    pic.addEventListener("click" , changePic );
}
</script>