实现一个简单的相册功能:点击缩略图后,在指定位置呈现相应的原图。
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的字符串信息么????

解决方案 »

  1.   

    你是忘记return false阻止链接导航到href指定的地址了吧,和传递this或者this.href没关系
      

  2.   

    <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;
    };
    })(i);
    };
    */ //用this更简单
    for(var i=0; i<links.length; i++) {
    links[i].onclick=function(){
    show(this.getAttribute("href"));
    return false;
    };
    };
    }
    </script></body>
    </html>
      

  3.   

    click 事件里的this指的是你单击的 元素对象