1. 爱易网页
  2. JavaSript
  3. 求教一个匿名函数传参有关问题

求教一个匿名函数传参有关问题

日期：2014-05-16　 浏览次数：20519 次

求教一个匿名函数传参问题。
实现一个简单的相册功能：点击缩略图后，在指定位置呈现相应的原图。
html：
<html>
<head>

<script type="text/javascript" src="photoShow.js"></script>
<link rel="stylesheet" href="photoShow.css" type="text/css" />


</head>
<body>
<ul id="pho">
<li>
<a href="pics/img (1).jpg" class="show" title:="sunset">
<img src="pics/img (1).jpg" class="img"></img>
</a>
</li>

<li>
<a href="pics/img (2).jpg" class="show" title="Water lilies">
<img src="pics/img (2).jpg" class="img"></img>
</a>
</li>

<li>
<a href="pics/img (3).jpg" class="show" title="winter">
<img src="pics/img (3).jpg" class="img"></img>
</a>
</li>

<li>
<a href="pics/img (4).jpg" class="show" title="blue hills">
<img src="pics/img (4).jpg" class="img"></img>
</a>
</li>
</ul>

<img id="placeHolder" ></img>

</body>
</html>

javascript：
window.onload=addEvent;

function show(picUrl){
var placeHolder=document.getElementById("placeHolder");
placeHolder.setAttribute("src",picUrl);
return false;
}

function addEvent(){
var links=document.getElementById("pho").getElementsByTagName("a");
 
for(var i=0; i<links.length; i++)
{
links[i].onclick=function(){ 
  links[i].onclick=show(links[i].getAttribute("href"));
//return show(this.getAttribute("href")) };
}
}
如上，在用匿名函数传值的时候，我直接取到当前的<a>即links[i]并直接将其href属性以字符串形式传送，结果是在点击缩略图时直接切换到一个新的页面显示图片，而不是在当前页面的指定位置显示。
而如果我换成用this来传其href属性，则能够在当前页显示大图。
这两种传值方式有什么不同呢？ 不都是传递一个用来表示图片url的字符串信息么？？？？

------解决方案--------------------
HTML code
<html>
<head>

<script type="text/javascript" src="photoShow.js"></script>
<link rel="stylesheet" href="photoShow.css" type="text/css" />


</head>
<body>
<ul id="pho">
<li>
<a href="http://avatar.profile.csdn.net/B/8/3/2_string_.jpg" class="show" title:="sunset">
<img src="http://avatar.profile.csdn.net/B/8/3/2_string_.jpg" class="img" width="20" />
</a>
</li>

<li>
<a href="http://avatar.profile.csdn.net/5/1/F/2_cnlei.jpg" class="show" title="Water lilies">
<img src="http://avatar.profile.csdn.net/5/1/F/2_cnlei.jpg" class="img" width="20" />
</a>
</li>

</ul>

<img id="placeHolder" ></img>
<script type="text/javascript">
window.onload=addEvent;

function show(picUrl){
    var placeHolder=document.getElementById("placeHolder");
    placeHolder.setAttribute("src",picUrl);
    return false;
}

function addEvent(){
    var links=document.getElementById("pho").getElementsByTagName("a");

    //匿名函数
    /*
    for(var i=0; i<links.length; i++) {
        links[i].onclick=(function (i) {
            return function(){
                show(links[i].getAttribute("href"));
                return false;

相关资料更多>

  1. jsp中的如何打印特定的隐藏内容
  2. javascript 读物推荐
  3. JavaScript开发中一些有关问题（一）
  4. Extjs开发遇到的有关问题之一
  5. 实际下js文件放最后是个好方案，但有更好的方案
  6. 层内显示文本的分行解决思路
  7. jquery-ui-1.8.9 dialog在ie6上的拖动有关问题
  8. Atwood定理：“任何应用都可以使用JavaScript来编写，并最终也会由JavaScript编写。”
  9. 为什么DOM的操作对自定义的标签不起作用？该怎么处理