首页新闻找找看学习计划

关于js中变量作用的问题

0
悬赏园豆:10 [待解决问题]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>为多个Marker添加事件</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
    min-width:600px;
    min-height:767px;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
function init() {
    var center = new qq.maps.LatLng(39.916527,116.397128);
    var map = new qq.maps.Map(document.getElementById("container"), {
        center: center,
        zoom: 13
    });
    var infoWin = new qq.maps.InfoWindow({
        map: map
    });
    var latlngs = [
        new qq.maps.LatLng(39.91474,116.37333),
        new qq.maps.LatLng(39.91447,116.39336),
        new qq.maps.LatLng(39.90884,116.41306)
    ];

    for(var i = 0;i < latlngs.length; i++) {
        (function(n){ //1. n又是什么意思
            var marker = new qq.maps.Marker({
                position: latlngs[n],
                map: map
            });
            qq.maps.event.addListener(marker, 'click', function() {
                infoWin.open();
                infoWin.setContent('<div style="text-align:center;white-space:'+
                'nowrap;margin:10px;">这是第 ' +
                n + ' 个标注</div>');
                infoWin.setPosition(latlngs[n]);
            });
        })(i);  //2. 请问(i)是什么意思,n又是什么意思
    }
}
</script>
</head>
<body onload="init();">
<div id="container"></div>
<p>给三个标注绑定点击事件,当点击标注时,会弹出标注的序号信息。</p>
</body>
</html>

请看代码中红色注释1和2

App1eOrange的主页 App1eOrange | 初学一级 | 园豆:121
提问于:2018-06-05 11:29
< >
分享
所有回答(4)
0

function(n){i} 是函数的另一个写法  相当于  function  n(){}    n(i);  先定义一个函数然后调用

河畔 | 园豆:723 (小虾三级) | 2018-06-05 11:54
for(var i = 0;i < latlngs.length; i++) {
        (function(n){ //1. n又是什么意思
            var marker = new qq.maps.Marker({
                position: latlngs[n],
                map: map
            });
            qq.maps.event.addListener(marker, 'click', function() {

                console.log('第' + i + '个被点击了'); //控制台输出:第3个被点击了

                infoWin.open();
                infoWin.setContent('<div style="text-align:center;white-space:'+
                'nowrap;margin:10px;">这是第 ' +
                n + ' 个标注</div>');
                infoWin.setPosition(latlngs[n]);
            });
        })(i);  //2. 请问(i)是什么意思,n又是什么意思
    }    

我在这里加了一句console.log('第' + i + '个被点击了');,为什么输出“第3个被点击了”

支持(0) 反对(0) App1eOrange | 园豆:121 (初学一级) | 2018-06-05 12:30

@App1eOrange: 你这边总长度就是4吧  console.log是执行完才会出来的,所以显示的是最后一个    你用alert试试

支持(0) 反对(0) 河畔 | 园豆:723 (小虾三级) | 2018-06-05 13:00

@河畔: 

var latlngs = [
        new qq.maps.LatLng(39.91474,116.37333),
        new qq.maps.LatLng(39.91447,116.39336),
        new qq.maps.LatLng(39.90884,116.41306)
    ];

只有3个

支持(0) 反对(0) App1eOrange | 园豆:121 (初学一级) | 2018-06-05 13:14

@App1eOrange: 你把这一行拿到qq.maps.event.addListener这个函数外面

支持(0) 反对(0) 河畔 | 园豆:723 (小虾三级) | 2018-06-05 13:30

@河畔: 在qq.maps.event.addListener的外面是可以,但是为什么在里面有问题呢?

支持(0) 反对(0) App1eOrange | 园豆:121 (初学一级) | 2018-06-05 13:53
0

https://www.cnblogs.com/sunshine-wy/p/8986791.html

变量n我没看懂,但是我之前遇到的一个问题和你这类似~ 

 

默卿 | 园豆:3931 (老鸟四级) | 2018-06-05 13:28

什么样的问题

支持(0) 反对(0) App1eOrange | 园豆:121 (初学一级) | 2018-06-05 14:25
0

你需要理解一下js闭包,以及其在循环事件绑定中的应用,搜索关键词:js  闭包  事件绑定

jello chen | 园豆:7091 (大侠五级) | 2018-06-05 20:48
0

(function(n){

})(i)

这是一个匿名的自调用函数。它没有函数名,而且会自动调用。
实际上上面的等效于:
function func(n){
}

func(i);

有问题可以加我QQ 2057388734 继续讨论

Joey先生 | 园豆:222 (菜鸟二级) | 2019-05-13 16:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册