經典面試題：點擊圖片進行兩張圖片切換

題目：

有兩張圖片，一張黑白，一張彩色。點擊圖片，黑白切換成彩色圖，再點擊彩色切換成黑白圖。

解決方法一：利用一個變量統計奇偶點擊數。

<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>