jQuery动态追加页面数据以及事件委托详解

我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了。

首先效果图如下:

jQuery动态追加页面数据以及事件委托详解

这个只截取了最底下的一部分页面。在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失。
我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完。
首先body中代码如下:

<div id = "container"> <h1> Photo Gallery</h1> <div id = "gallery"> <div class = "photo"> <img src = "./images/1.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye ....</div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/2.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye.... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/3.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye.... </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> //若干图片 </div> <div class = "link"><a id = "more-photos" href = "1.html"> More Photos &gt;&gt;</a></div> </div>

然后在同一根目录下写几个HTML代码片段,用于加载。

如,我这有一个1.html代码如下

<div class = "photo"> <img src = "./images/1.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/2.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/3.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/4.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/5.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div> <div class = "photo"> <img src = "./images/6.jpg"> <div class = "details"> <div class = "description">The Cullin Mountains, Isle of skye </div> <div class = "date">12/24/2000</div> <div class = "photographer"> Alasdair Dougall</div> </div> </div>

在这个HTML片段中我引入了6个图片。其他的片段如2.html等等都可以仿照上面的这个来写。在定义好了许多个HTML片段后,利用jQuery进行动态追加数据。

首先引入一个jquery库

<script> $(document).ready(function(){ //首先定义一个变量来记录当前是多少页 var pageNum = 1; //给链接添加点击事件 $("#more-photos").click(function(event){ event.preventDefault(); var $link = $(this); //获得当前所点链接的url var url = $link.attr('href'); //如果该链接的url存在,进行页面追加 if(url){ $.get(url, function(data){ $("#gallery").append(data); }); pageNum ++; //总共有十个片段要追加,名称分别为1.html,2.html ...10.html 当当前页面的总数小于总数时,进行链接更新。 if(pageNum < 10){ $link.attr('href', './'+pageNum+'.html'); } //当将所有片段追加完成后,移除链接。 else{ $link.remove(); } } }) });

以上的代码就可以进行动态的向页面追加数据了。

但是在谷歌的浏览器中会出现以下的错误:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wysspp.html