JavaScript中的[].indexOf.call()小技巧-CSDN博客

这几天学习了JS,试着做了一些简单的功能实现，其中一个很典型的小功能就是鼠标停留小图切换大图。


其中主要涉及到一个从父类节点产生事件去处理子节点的细节。

<ul class="small" id="small">
<li>此处放的是小图。</li>

<li>此处放的是小图。</li>
...
...

</ul>

思路是首先获取ul:

var smallNode = document.getElementById("small");

一般到了这里，大多数做法就是用循环将父节点下的子节点全部遍历出来，并且用闭包的形式给子节点绑定鼠标事件。
说实话，我开始也是这么做的，但是我一直在思考，有没有办法不用循环的方式，直接将子节点取出，在网上找了好久，大同小异的都是用循环做的，要么就是说用jquery。
可惜我还没去学jquery，暂时也想试试看到底不用循环行不行，没想到还真让我给弄出来了。

smallNode.onmousemove = function (evevt) {
                var target = evevt.target;//获取事件源
                if(target.localName=="img"){//锁定到需求需要的标签上
                    //在smallNode.getElementsByTagName("li")=li集合中查找evevt.target.parentNod=当前li的下标
                    var index = [].indexOf.call(smallNode.getElementsByTagName("li"), evevt.target.parentNode);
　　　　　　　　　　　　//以下是更换大图
                    var bigimg = document.getElementById("big");
                    bigimg.style.backgroundImage="url('"+big[index]+"')";
                }
            };

获取父节点下当前鼠标停留的子节点的下标

var index = [].indexOf.call(smallNode.getElementsByTagName("li"), evevt.target.parentNode);
意思是查找子节点集合中与当前鼠标停留的子节点的下标。index即为子节点在父节点中的下标值。

[]是一个集合，实际上就是new Arrar()。

最后附上全部代码

主要代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标切换</title>
    <style>
        .box{
            text-align: center;
            width: 385px;
            height: 450px;
            border: 1px solid #ccc;
            margin: 100px auto;

            position: relative;
        }
        .box>.big {

            position: absolute;
            margin: 12px;
            background-image: url(img-shubiao/01big.jpg);
            background-repeat:no-repeat ;
            width: 360px;
            height: 360px;
        }
        .box > .small{
            position: absolute;
            list-style-type: none;
            bottom: -15px;
            right: 0px;
            width: 100%;
        }
        .box > .small > li {

            display: inline-block;
            width: 60px;
            height: 60px;
            margin: 5px;
        }

    </style>
    <script>
        window.onload = function () {
            var small = ["img-shubiao/01.jpg","img-shubiao/02.jpg","img-shubiao/03.jpg","img-shubiao/04.jpg","img-shubiao/05.jpg"];
            var big = ["img-shubiao/01big.jpg","img-shubiao/02big.jpg","img-shubiao/03big.jpg","img-shubiao/04big.jpg","img-shubiao/05big.jpg"];
            var smallNode = document.getElementById("small");
            var litxt="";
            var n = 0;
            for(var i =0 ; i<small.length;i++){
                litxt = "<li><img src='"+small[i]+"' ></li>";
                smallNode.innerHTML += litxt;
            }
            smallNode.onmousemove = function (evevt) {
                var target = evevt.target;
                if(target.localName=="img"){
                    //在smallNode.getElementsByTagName("li")=li集合中查找evevt.target.parentNod=当前li的下标
                    var index = [].indexOf.call(smallNode.getElementsByTagName("li"), evevt.target.parentNode);
                    var bigimg = document.getElementById("big");
                    bigimg.style.backgroundImage="url('"+big[index]+"')";
                }
            };

        }

    </script>
</head>
<body>
    <div class="box" id="box">
        <div class="big" id="big"></div>
        <ul class="small" id="small">

        </ul>
    </div>
</body>
</html>