JavaScript中的[].indexOf.call()小技巧

爱被打了一巴掌 2021-12-17 11:17 390阅读 0赞

这几天学习了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>

转载于:https://www.cnblogs.com/yulonglyw/p/7912149.html