zmjJoker
zmjJoker
2016-05-05 15:31

关于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,但是无法追加成功,点击了没效果,希望大牛指点一下

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

2条回答