网页中的图片预览一般都需要获取图片列表的索引,或则图片对应的标签的索引,以此达到点击相应的标签获取索引,显示相应的图片
列表有很多种表达的方式,一种是
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>葡萄</li>
</ul>
这种情况下,如果使用jquery获取<li>的索引较为简单,因为,jQuery中含有index()方法,具体实现如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../jquery.js"></script> </head> <body> <ul> <li>苹果</li> <li>香蕉</li> <li>西瓜</li> <li>葡萄</li> </ul> <script type="text/javascript"> $(function(){ $('ul li').click(function(){ var i = $(this).index(); alert(i); }) }) </script> </body> </html>
如果直接使用原生javascript的话,此时就要主意作用域的问题,可以利用闭包来解决
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <ul> <li>苹果</li> <li>香蕉</li> <li>西瓜</li> <li>葡萄</li> </ul> <script type="text/javascript"> function its(){ var uls = document.getElementsByTagName("ul"); var lis = document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].onclick = (function(num){ return function(){ alert(num); } })(i); } } its(); </script> </body> </html>
如果列表的表达方式是:
<div id="fruit">
<a href="#">苹果</a>
<a href="#">香蕉</a>
<a href="#">西瓜</a>
<a href="#">葡萄</a>
</div>
在这种情况下,使用jquery解决的方式和javascript解决的方式同第一种原理是一样的。
欢迎指错和改进,谢谢!