1

jqueryを使用してhtmlデータを見つけて置き換えようとしています。jquery スクリプトは、1 つの div コンテナーから html データを取得し、それを新しいデータに置き換えているという事実で機能しています。問題はリロード時にあり、コンテナ クラスが複製され、次の div の計算に必要な masonry-brick クラスが追加されません。

JQuery は次のとおりです。

$("div.more a").on("click", function (event) {
   event.preventDefault();
   // get the contents
    $.get(this.href, function (response) {
        // jquerify the response HTML string and find our replaceable area
        var result = $(response).find('.l-home-grid');
        // do the replace
        $('.l-home-grid').html(result);
    });
  // Revert all to original state
  $("a.active")
    .removeClass("active")
    .addClass("static");
  // Set classes to clicked anchor
  $(this)
    .removeClass("static")
    .addClass("active");

  window.location.hash = $(this).text();
});

これはhtmlになります：

<div class="mobile-padding l-home-grid masonry" style="position: relative; height: 2660px; ">
  <div class="mobile-padding l-home-grid">
    <div class="gridCells"><a href="#">
      <h4>Things</h4>
      <img width="256" height="182" src="foo.jpg"> </a></div>
    <div class="gridCells"><a href="#">
      <h4>More Things</h4>
      <img width="256" height="182" src="foo.jpg"> </a></div>
    <div class="gridCells"><a href="#">
      <h4>Objects</h4>
      <img width="256" height="182" src="foo.jpg" > </a></div>
  </div>
</div>

なぜ

<div class="mobile-padding l-home-grid masonry" style="position: relative; height: 2660px; ">
      <div class="mobile-padding l-home-grid">

二回ロード？

目標はこれです：

<div class="mobile-padding l-home-grid masonry" style="position: relative; height: 2660px; ">
    <div class="gridCells masonry-brick"><a href="#">
      <h4>Things</h4>
      <img width="256" height="182" src="foo.jpg"> </a></div>
   ...
4

1 に答える 1

1

これは、応答の要素全体.l-home-gridを既存の.l-home-grid要素に追加しているためです。この行を変更します。

var result = $(response).find('.l-home-grid');

これに：

var result = $(response).find('.l-home-grid').html();

応答の内容をコンテナに追加するだけです。電話する必要があるかもしれません

$('.l-home-grid').masonry('reload');

メーソン化を確実にするために、新しいコンテンツを取り込んだ後。

于 2012-06-26T16:46:25.037 に答える