2

複雑な質問がありますので、なるべく短くしていきたいと思います。

私のユースケースは、モバイルWebサイトのRSSフィードを作成することです。インターフェイスは、Pulseリーダーのみのブラウザベースに似ています。

私は、XML APIに接続し、ページの読み込み時に初期データを取得するために、PHPを使用して手間のかかる作業を行っています。私はjQueryを使用してAJAX呼び出しを構築しようとしています。これにより、URIクエリ文字列が変更click()され、新しい結果セットが取得され、既存の要素に追加されます。

私のURIは次のようになります。

http://www.domain.com/request.php?subcategoryId=1&page=1

PHPforeach()ループを実行して、ページにデータを入力しています。

<?php // Collect Subcategories and Titles
 foreach ($phpObjects->SubcategoryResult as $SubcategoryResult) { ?>

<?php // Callback to subcategoryArticleRequest() to recieve article data
 $subcategoryObjects = subcategoryArticleRequest($SubcategoryResult->subcategoryId); ?>

<div class="subcategory">
  <h2><?php echo $SubcategoryResult->subcategoryName; ?></h2>
  <div class="articleFeed overthrow">
    <table>
      <tr>
        <?php foreach ($subcategoryObjects->articleResult as $articleResult) { ?>
        <td>

          <!-- ARTICLE CONTENT POPULATED HERE -->

        </td>
        <?php } ?>

        <td data-subcategoryId="<?php echo $SubcategoryResult->subcategoryId; ?>" onClick="page++">
          <a class="loadMore" href="#">Load More</a>
        </td>

      </tr>
    </table>
  </div><!-- .articleFeed -->
</div>
<?php } ?>

主な焦点は、foreachの実行後にテーブルに追加するこの要素です。このリンクを使用して、AJAXを介してさらに記事をクリックしてロードします（ここにハードコーディングdata-subcategoryIdしています）。

<td data-subcategoryId="1">
  <a class="loadMore" href="#">Load More</a>
</td>

基本的に、誰かがこのボタンをクリックすると、AJAX呼び出しが行われ、取得&page=2などが行われます。

これが私のJavaScriptです：

var page = 1;

$('.loadMore').click(function() {
  page++;
  var subcategoryId = $(this).parent().attr('data-subcategoryId');
  var url = 'http://www.domain.com/request.php?subcategoryId='+subcategoryId+'&page='+page;

  console.log(url);
});

私が遭遇し続ける問題は、.loadMoreリンクをクリックするとpage変数がインクリメントされますが、グローバルにそれを実行するということです。var page = 1;クリック関数の内側を動かそうとすると、 1回だけインクリメントされ2ます。

この関数を正しく取得したら、url変数をAJAX関数に渡して、新しいコンテンツを取得できます。

念のためJSFiddleを設定しましたが、subcategoryIdは未定義として表示され続けます。

JSFiddle

4

2 に答える 2

2

したがって、各要素には独自のpage変数が必要であるように思われます。

簡単な解決策は.each()、ハンドラーを割り当て、コールバックpage内に変数を作成するために使用することです。each

$('.loadMore').each(function() {

    var page = 1;

    $(this).click(function() {
      page++;
      var subcategoryId = $(this).parent().attr('data-subcategoryId');
      var url = 'http://www.domain.com/request.php?subcategoryId='+subcategoryId+'&page='+page;

      console.log(url);
    });

});

JavaScript関数はクロージャであるため、各.clickハンドラーは独自の新しい変数環境で作成されており、各ハンドラーは常に、作成時にスコープ内にあった変数への参照を持ちます。

これは、各ハンドラーがインクリメントする独自の個人page変数を持っていることを意味します。

別の解決策は、「イベントデータ」を使用することです。オブジェクトを介してデータを特定の要素に関連付けることができeventます。

$('.loadMore').each(function() {
    $(this).bind("click", {page:1}, loadMoreHandler);
});

function loadMoreHandler(e) {
  e.data.page++;
  var subcategoryId = $(this).parent().attr('data-subcategoryId');
  var url = 'http://www.domain.com/request.php?subcategoryId='+subcategoryId+'&page='+e.data.page;

  console.log(url);
}

クロージャが利用されなくなったため、関数オブジェクトを再利用するために、ハンドラーに名前付き関数を使用しました。関係がない場合は、無名関数に戻すことができます。

于 2012-09-12T22:41:48.573 に答える
1

に新しいデータを追加します：

<td data-subcategoryId="1" data-page="1">

次に、：をインクリメントpageして更新しdata-pageます。

$('.loadMore').click(function() {
  var page = $(this).parent().data('page');
  page++;
  $(this).parent().data('page',page);
  ...
于 2012-09-12T22:39:02.707 に答える