为什么start = parseInt(spans[this.index].style.top);是undefined?


<div class="bottom clearfix" id="bottom">
                <div class="one" id="div1">
                    <img src="../images/smallpic.png">
                    <span class="span" id="sp1">
                        <strong class="s1">家装监理</strong>
                        <em class="s2">4大验收阶段 78项验收标准全程把关</em>
                    </span>
                </div>
                <div class="two" id="div2">
                    <img src="../images/smallpic.png">
                    <span class="span" id="sp2">
                        <strong class="s1">家装监理</strong>
                        <em class="s2">4大验收阶段 78项验收标准全程把关</em>
                    </span>
                </div>
<div>


var bottom = document.getElementById("bottom");
var divs = bottom.getElementsByTagName("div");
var spans = bottom.getElementsByTagName("span");
var speed =-10;
var start =260;
var timer ;
var timerout;
for (var i = 0; i < divs.length; i++) {
        divs.index = i;
        divs[i].onmouseout = function(){
            timerout = setInterval(function(){
                start = parseInt(spans[this.index].style.top);
                console.log(start);
                start -=speed;
                spans[this.index].style.top = start+"px";
            },100);
        }
    };

this是动态绑定的...

不想动态绑定可以考虑用箭头函数

for (var i = 0; i < divs.length; i++) {
    divs[i].index = i;
    // divs[i].onmouseout = function () {
    //     timerout = setInterval(function () {
    //         start = parseInt(spans[this.index].style.top);
    //         console.log(start);
    //         start -= speed;
    //         spans[this.index].style.top = start + "px";
    //     }, 100);
    // }
    divs[i].onmouseout = function () {
        timerout = setInterval(() => {
            start = parseInt(spans[this.index].style.top);
            console.log(start);
            start -= speed;
            spans[this.index].style.top = start + "px";
        }, 100);
    }
}

转码之后类似这样

divs[i].onmouseout = function () {
    var _this = this;

    timerout = setInterval(function () {
        start = parseInt(spans[_this.index].style.top);
        console.log(start);
        start -= speed;
        spans[_this.index].style.top = start + "px";
    }, 100);
};



相关阅读:
vue单页面能调到新的页面吗?
HTML 5输入框只能输入汉字、字母、数字、标点符号?正则如何写?
koa+mysql ,插入数据库数据成功,但是无法将数据返回给前台
laravel自带的users表不能被修改吗?
一般在公司开发的话,框架用的多还是原生的PHP+MYSQL用的多呢??
webpack配置react.js问题npm ERR!
如何形象地解释 “结构化数据” 与 “半结构化数据” 的区别
uicollectionviewcell自适应问题
如何看待window.x和var x的区别
如何控制页面所有滚动条随着一个滚动条一起动
Laravel sql 排序
vue.js,我想把自定义组件里面的函数写到methods里面,但不成功
vue activate and deactivate
ajax请求异常问题
if...else if..else第三句不执行?
一个简单的react-router报错,无从着手
数组使用join拼接失败,求看一下
Hive向表里导入数据是不是会在HDFS上生成新文件及多个副本?
为什么有时候把代码压缩之后应用就不能正常运行了?
如何阻止h5body的滑动



快速导航

Copyright © 2016 phpStudy |