夏日博客

A-A+

jquery自动给页面所有图片加链接

2016年01月07日 前端设计 暂无评论 阅读 4 views 次

这个功能用得比较少，但有时也会用上，我们在上传图片没有连接了，但希望用户点击时加上指定连接，下面来看一个例子。

html与图片,代码如下:

  1. <script src='jquery-1.9.1.min.js'></script>  
  2. <div id="replAll">  
  3. <img alt="" src="20140925101646722.png" /><br/>  
  4. <img alt="" src="20140919094831881.png" />  
  5. </div>  

jquery遍历代码如下:

  1. <script type="text/javascript">  
  2.     $(function ()  
  3.     {     
  4.         var curr_url = 'http://www.xiariboke.net';  
  5.         $("#replAll").click(function ()  
  6.         {  
  7.             $('img').each(function ()  
  8.             {  
  9.                 var currImg = $(this);    
  10.                 currImg.wrap("<a href='" + curr_url + "'  target='_blank'/>");  
  11.             });  
  12.         });  
  13.     });  
  14. </script>  

原理分析：这个非常的简单只要在用户点击#replAll容器时就会自动给这个容器中所有图片增加curr_url的地址地址了，这里我们设置的是打开https://www.xiariboke.net主域名

标签：

给我留言