1

これは私がこれまでに持っているものです:

$(document).ready(function(){   
  $("#feed-page").load("feed.php #first-feed");

  $('.feed-load').click(function(){   
    $("#feed-page").load("feed.php #second-feed" ,  hideLoading);
    $(".feed-load .button-content").css( "display" , "none" );
    $('.feed-load-img').css( "display" , "block" );
  });

  function hideLoading() {  
    $(".feed-load .button-content").css( "display" , "block" );
    $(".feed-load .feed-load-img").css( "display" , "none" ); 
  }
}); // end document ready

私の問題は、「さらに読み込む」をクリックすると、コンテンツがスワップアウトされることです。

それは私が望んでいることではありません。コンテンツをすべて残しておきたいだけです。つまり、ページの読み込み時に既に存在するコンテンツを残しておきたいのですが、「さらに読み込む」をクリックすると、そのコンテンツを残したいのですがなんらかの理由で、元々そこにあったコンテンツが新しいコンテンツに置き換わってしまいますが、これは望ましくありません。

実際の例はこちらにあります: http://www.cyberfanatic.com

4

1 に答える 1

3

現在のコードの問題は、ユーザーがボタンをクリックした後、既存のデータの上に新しいデータをロードしていることです。jQuery .load()を参照してください。

必要なのは、既存のデータを保持するために、新しいデータを追加することです。

// on click
$('.feed-load').click(function(){   

  // load the new data to an element
  $("<div>").load("feed.php #second-feed", function() {

    // all done, append the data to the '#feed-page'
    $("#feed-page").append($(this).find("#second-feed").html());

    // call your function
    hideLoading();
  });

  // continue the remaining of your code...
  $(".feed-load .button-content").css( "display" , "none" );
  $('.feed-load-img').css( "display" , "block" );
});

編集済み

コメントで要求されたアニメーションを追加します。

...
// all done, append the data to the '#feed-page'
var $html   = $(this).find("#second-feed").html(),
    $newEle = $('<div id="second-feed" />').attr("style", 'display:none;').html($html);

$("#feed-page").append($newEle);
$('#second-feed').slideToggle();
...

このフィドルの例を参照してください!

于 2012-06-13T22:49:54.643 に答える