2

我有一个复杂的问题，所以我会尽量保持简短。

我的用例是为移动网站构建 RSS 提要。该界面将类似于仅基于浏览器的 Pulse 阅读器。

我正在使用 PHP 进行繁重的工作，以连接到 XML API 并在页面加载时提取初始数据。我正在尝试使用 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;click 函数内部，它只会增加一次到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 回答