JavaScript:相对于父级单击时增加变量值

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 以防万一，尽管它一直将 subcategoryId 显示为未定义:

JSFiddle

Answer 1

所以听起来每个元素都应该有自己的 page 变量。

一个简单的解决方案是使用 .each() 分配处理程序，并在 each 回调中创建 page 变量。

$('.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);
}

由于不再利用闭包，为了函数对象重用，我为处理程序使用了命名函数。如果您不介意，可以将其改回匿名函数。