<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>less语言变量和混合</title>
<link rel="stylesheet/less" href="style.less" />
<script src="https://cdn.bootcss.com/less.js/3.0.4/less.min.js"></script>
</head>
<body>
<p>
<img src="" alt="" id="one"/>
<p>NO.1:十月梦想</p>
</p>
<p>
<img src="" alt="" id="two"/>
<p>NO.2:pony马</p>
</p>
<p>
<img src="" alt="" id="three"/>
<p>NO.3:88888</p>
</p>
<h2 >列表文字详情</h2>
<h1>less变量和混合</h1>
<script type="text/javascript">
var qlogo=function(num){
qlogo='http://q2.qlogo.cn/headimg_dl?bs='+num+'&dst_uin='+num+'&dst_uin='+num+'&;dst_uin='+num+'&spec=100&url_enc=0&referer=bu_interface&term_type=PC'
return qlogo;
}
var one=document.getElementById('one');
var two=document.getElementById('two');
var three=document.getElementById('three');
one.src=qlogo(123456);
three.src=qlogo(6688330);
two.setAttribute('src',qlogo(10001));
three.src=qlogo(88888);
</script>
</body>
</html>
在上述代码执行过程中,发现这个qlogo函数只能执行一次,多次执行则提示qlogo不是一个函数
经过一番之后,查找问题,下面详见问题发生原因解析!
第一次正常执行没有问题,且看第二次问题分析,第二次qlogo被执行的调用了参数
three.src=qlogo(6688330)
此时函数体应该是这个样子
可以console.log(qlogo) //打印结果http://q2.qlogo.cn/headimg_dl?bs=123456&dst_uin=123456&dst_uin=123456&;dst_uin=123456&spec=100&url_enc=0&referer=bu_interface&term_type=PC
所以下次qlogo进行传参是无效的,qlogo,此时qlogo的函数已经是一个具体的url地址
切记在函数名和函数体内的变量一定要区别开,不要遇到不知所措的坑,博主踩坑完毕!