【Java Web基础】（十七）JS获取多个标签中当前点击的标签

功能需求描述

需要一个功能，点击下方的图片，上面的图片就会切换成下面相应图片的大图。

这一部分的代码我是这么写的：
.html文件

<div id="pictureArea">
        <div id="bookImgBig">
            <img class="bookDetailImgBig" src="/img/bookDetail/三体/img1.jpg" />
            <img class="bookDetailImgBigUnshow" src="/img/bookDetail/三体/img2.jpg" />
            <img class="bookDetailImgBigUnshow" src="/img/bookDetail/三体/img3.jpg" />
            <img class="bookDetailImgBigUnshow" src="/img/bookDetail/三体/img4.jpg" />
        </div>
        <div id="bookImgSmall">
            <img class="bookDetailImgSmall" src="/img/bookDetail/三体/img1.jpg" />
            <img class="bookDetailImgSmall" src="/img/bookDetail/三体/img2.jpg" />
            <img class="bookDetailImgSmall" src="/img/bookDetail/三体/img3.jpg" />
            <img class="bookDetailImgSmall" src="/img/bookDetail/三体/img4.jpg" />
        </div>
    </div>

.css文件

#pictureArea{
    
    
    width: 400px;
    float: left;
    margin-top: 10px;
}
.bookDetailImgBig{
    
    
    height:380px;
    width:380px;
    border: solid 1px #909090;
}
.bookDetailImgBigUnshow{
    
    
    display: none;
}
#bookImgSmall{
    
    
    margin-top: 5px;
}
.bookDetailImgSmall{
    
    
    height:70px;
    width:70px;
    border: solid 1px #000b65;
}
.bookDetailImgSmall:hover{
    
    
    cursor: pointer;
}

写法及修正方法

接下来，需要编辑JS文件。
一开始我写的如下

var bookImgList = document.getElementById("bookImgSmall").getElementsByTagName("img");
for(var i = 0;i < bookImgList.length;i++){
    
    
    bookImgList[i].onclick = function(){
    
    
        var bookImgBigList = document.getElementById("bookImgBig").getElementsByTagName("img");
        for(var j = 0;j < bookImgBigList.length;j++){
    
    
            if(bookImgBigList[j].className == "bookDetailImgBig"){
    
    
                bookImgBigList[j].className = "bookDetailImgBigUnshow";
                bookImgBigList[i].className = "bookDetailImgBig";
                break;
            }
        }
    }
}

但是这么写好像会报一个叫“Cannot set property ‘className’ of undefined”的错误。可以使用consol.log来检测i和j的值，j是没有问题的，但是i会变成< li 数组>长度的大小。
那么，就给这个数组的每个元素加上一个index标签，用以表示当前的下标，修改后的JS如下

var bookImgList = document.getElementById("bookImgSmall").getElementsByTagName("img");
for(var i = 0;i < bookImgList.length;i++){
    
    
    bookImgList[i].index = i;
    bookImgList[i].onclick = function(){
    
    
        var bookImgBigList = document.getElementById("bookImgBig").getElementsByTagName("img");
        for(var j = 0;j < bookImgBigList.length;j++){
    
    
            if(bookImgBigList[j].className == "bookDetailImgBig"){
    
    
                bookImgBigList[j].className = "bookDetailImgBigUnshow";
                bookImgBigList[this.index].className = "bookDetailImgBig";
                break;
            }
        }
    }
}

给代码做一下解释：
第一行：获取html网页中id为bookImgSmall下所有标签为img的数组（获得小的图片）
第二行：for语句，循环着个数组中的每一个元素
第三行：存储所在位置对应的值至index中
第四行：为每一个img标签注册点击事件
第五行：获得html网页中id为bookImgBig下所有标签为img的数组（即获得大的图片）
第六行：这个for循环用于找到当前正在展示的大图
第七行：使用if语句判断，如果是正在展示的大图，则class的名字为bookDetailImgBig
第八行：将图片修改为不展示的，即将class名字修改为bookDetailImgBigUnshow
第九行：将要展示的图片的class名字修改为bookDetailImgBig（this.index即获得点击的是哪一张小图，bookImgBigList[this.index]即获得大图中对应图片的信息，修改className就可以展示了。）
这样便可以实现点击后图片切换的效果了

运行效果

点击第二张图：

点击第三张图：