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

3个回答

devmiao
devmiao   Ds   Rxr 2016.05.06 07:08
showbo
showbo   Ds   Rxr 2016.05.06 09:36

jquery路径对不对,发布网站没有?没有发布网站通过http协议访问不要用webkit核心浏览器如chrome来测试,会出现跨域问题

zmjJoker
zmjJoker 回复无聊码农: 我用的mac,在新页面打开1.html没问题,但是就是追加不上去,点击了没有反应
一年多之前 回复
showbo
showbo 回复zmjJoker: safari也是webkit核心。firefox f12打开浏览器看报什么错误,不是说路径对就对的,要看浏览器最终的结果
一年多之前 回复
zmjJoker
zmjJoker 路径是对的,网站没有发布,但我用的是firefox和safari调试的 但是我对着jQuery基础教程做的,他给出的完整的代码也是执行不了的
一年多之前 回复
zmjJoker
zmjJoker 路径是对的,网站没有发布,但我用的是firefox和safari调试的 但是我对着jQuery基础教程做的,他给出的完整的代码也是执行不了的
一年多之前 回复
CSDNXIAON
CSDNXIAON   2016.05.05 23:42

jQuery--Ajax提交页面数据
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!