zmjJoker 2016-05-05 15:31 采纳率: 0%
浏览 1336

关于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条回答 默认 最新

  • devmiao 2016-05-05 23:08
    关注
    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥15 state显示变量是字符串形式,但是仍然红色,无法引用,并显示类型不匹配
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波