Question

我有一个复杂的问题，所以我会尽量缩短它。

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

我正在利用PHP进行繁重的工作，以便连接到XML API并在页面加载时提取初始数据。我正在尝试使用jQuery构建一个AJAX调用，它将在click()上修改我的URI查询字符串并提取一组新的结果并将它们附加到我现有的元素中。

我的URI看起来像这样：

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

我正在运行PHP foreach()循环来填充我的页面：

<?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;，它只会增加一次到2。

一旦我正确使用此功能，我可以将url变量传递给我的AJAX函数以提取新内容。

我设置了一个JSFiddle以防万一，虽然它一直显示subategoryId为undefined：

JSFiddle

Answer 1

所以听起来每个元素都应该有自己的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);
}

由于不再利用闭包，为了函数对象的重用，我为处理程序使用了一个命名函数。如果对您无关紧要，可以将其更改回匿名函数。

Answer 2

将新数据添加到：

<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);
  ...

JavaScript：增量相对于父级点击的变量值

2 个答案: