问题描述
- 关于jQuery追加数据页面问题
- index.html
<!DOCTYPE html><html lang=""en""> <head> <meta charset=""utf-8""> <title>Photo Library</title> <link rel=""stylesheet"" href=""10.css"" type=""text/css"" /> <!--[if lte IE 8]> <link rel=""stylesheet"" href=""10-ie.css"" type=""text/css"" /> <![endif]--> </head> <body> <div id=""container""> <h1>Photo Gallery</h1> <div id=""gallery""> <div class=""photo""> <img src=""photos/skyemonroe.jpg""> <div class=""details""> <div class=""description"">The Cuillin Mountains Isle of Skye Scotland.</div> <div class=""date"">12/24/2000</div> <div class=""photographer"">Alasdair Dougall</div> </div> </div> <div class=""photo""> <img src=""photos/dscn1328.jpg""> <div class=""details""> <div class=""description"">Mt. Ruapehu in summer</div> <div class=""date"">01/13/2005</div> <div class=""photographer"">Andrew McMillan</div> </div> </div> <div class=""photo""> <img src=""photos/024.JPG""> <div class=""details""> <div class=""description"">midday sun</div> <div class=""date"">04/26/2011</div> <div class=""photographer"">Jaycee Barratt</div> </div> </div> <div class=""photo""> <img src=""photos/dsc20040321_191051_23.jpg""> <div class=""details""> <div class=""description"">Dark sunset sky tones</div> <div class=""date"">03/21/2004</div> <div class=""photographer"">Leon Brooks</div> </div> </div> <div class=""photo""> <img src=""photos/portland_178.jpg""> <div class=""details""> <div class=""description"">Mt. Shasta Weed CA</div> <div class=""date"">06/16/2004</div> <div class=""photographer"">Brian Lopez</div> </div> </div> <div class=""photo""> <img src=""photos/michelle_229.jpg""> <div class=""details""> <div class=""description"">Mountain with tree cover on foothills</div> <div class=""date"">09/28/2004</div> <div class=""photographer"">Brian Lopez</div> </div> </div> <div class=""photo""> <img src=""photos/100_0207.JPG""> <div class=""details""> <div class=""description"">Poas Volcano Caldera and Poor Man's Umbrella</div> <div class=""date"">01/02/2004</div> <div class=""photographer"">Nat Edwards</div> </div> </div> <div class=""photo""> <img src=""photos/DSC01281.JPG""> <div class=""details""> <div class=""description"">Mt Compas South Australia</div> <div class=""date"">01/01/2007</div> <div class=""photographer"">Rod Conlon</div> </div> </div> <div class=""photo""> <img src=""photos/m4.jpg""> <div class=""details""> <div class=""description"">Waterfall on the outskirts of Highlands N.C.</div> <div class=""date"">11/21/2008</div> <div class=""photographer"">Neal Floyd</div> </div> </div> </div><a id=""more-photos"" href=""1.html"">More Photos</a> </div> <script src=""jquery.js""></script> <script src=""10.js""></script> </body></html>1.html
<div class=""photo""> <img src=""photos/dsc_21070a.jpg""> <div class=""details""> <div class=""description"">Gum Tree at Sunset Auckland New Zealand</div> <div class=""date"">04/12/2009</div> <div class=""photographer"">Andrew McMillan</div> </div></div><div class=""photo""> <img src=""photos/01070131.JPG""> <div class=""details""> <div class=""description"">Noleridge Park Cedar Rapids Iowa Cloudscape</div> <div class=""date"">01/07/2000</div> <div class=""photographer"">Allan Zieser</div> </div></div><div class=""photo""> <img src=""photos/P3120502.JPG""> <div class=""details""> <div class=""description"">Mountains in Jasper</div> <div class=""date"">03/12/2006</div> <div class=""photographer"">Teri Metcalf</div> </div></div><div class=""photo""> <img src=""photos/azsnow.jpg""> <div class=""details""> <div class=""description"">San Fransisco Mountains looking across Flagstaff</div> <div class=""date"">12/14/2004</div> <div class=""photographer"">Tyler Finvold</div> </div></div><div class=""photo""> <img src=""photos/795040-R1-026-11A_011.jpg""> <div class=""details""> <div class=""description"">God's Peace</div> <div class=""date"">11/15/2010</div> <div class=""photographer"">Dan Hart</div> </div></div><div class=""photo""> <img src=""photos/0000001.jpg""> <div class=""details""> <div class=""description"">going home</div> <div class=""date"">11/23/2010</div> <div class=""photographer"">Guest</div> </div></div><div class=""photo""> <img src=""photos/010.JPG""> <div class=""details""> <div class=""description"">Clouds in southern England</div> <div class=""date"">04/23/2011</div> <div class=""photographer"">Jaycee Barratt</div> </div></div><div class=""photo""> <img src=""photos/dsc20050117_060629_5.jpg""> <div class=""details""> <div class=""description"">Whispy clouds</div> <div class=""date"">01/17/2005</div> <div class=""photographer"">Leon Brooks</div> </div></div><div class=""photo""> <img src=""photos/dsc20041029_180840_10.jpg""> <div class=""details""> <div class=""description"">Sun exploding through clouds Wahroona Western Australia</div> <div class=""date"">10/29/2004</div> <div class=""photographer"">Leon Brooks</div> </div></div>10.js
$(document).ready(function() { var pageNum = 1; $('#more-photos').click(function(event) { event.preventDefault(); var $link = $(this); var url = $link.attr('href'); if (url) { $.get(url function(data) { $('#gallery').append(data); }); pageNum++; if (pageNum < 20) { $link.attr('href:' pageNum + '.html'); } else { $link.remove(); } } }); $('div.photo').hover(function() { $(this).find('.details').fadeTo('fast' 0.7); } function() { $(this).find('.details').fadeOut('fast'); });});html代码中间的div部分可以忽略，要实现点击 More Photos 的时候再页面后直接追加页面1.html，但是无法追加成功，点击了没效果，希望大牛指点一下
解决方案
http://www.php100.com/html/program/jquery/2013/0905/6042.html
解决方案二：
jquery路径对不对，发布网站没有？没有发布网站通过http协议访问不要用webkit核心浏览器如chrome来测试，会出现跨域问题
解决方案三：
jQuery--Ajax提交页面数据
时间： 2024-12-26 21:11:21