JavaScript：单击时相对于父项增加变量值

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

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

我正在使用PHP进行繁重的工作，以连接到XMLAPI，并在页面加载时拉入初始数据。我正在尝试使用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 } ?>

本质上，当有人单击此按钮时，它将进行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

链接时，它会增加

页面

变量，但它会全局执行。如果我尝试移动

var页面=1

在单击功能中，它只会增加一次到

2

一旦我正确使用了这个函数，我就可以将

url

变量传递给我的AJAX函数，以获取新内容

我设置了一个JSFIDLE以防万一，尽管它一直显示子类别ID为未定义：

将新数据添加到：

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

---

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

page

变量

一个简单的解决方案是使用

.each（）

分配处理程序，并在

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

处理程序都是在自己的新变量环境中创建的，并且每个处理程序在创建时都会引用作用域中的变量

这意味着每个处理程序都有自己的要递增的个人

页面
变量

另一个解决方案是使用“事件数据”。您可以通过
事件
对象将数据与特定元素关联

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

由于闭包不再被利用，为了函数对象重用，我为处理程序使用了一个命名函数。如果这对你来说无关紧要，你可以把它改回匿名函数。
我不明白你为什么会被否决，因为你显然已经尝试过了，并且展示了你的尝试。你还摆好了小提琴。杰出的哦，
gray state的答案似乎就要来了
应该可以解决你的问题了。谢谢你的好话。这是一个很难表达的问题。更不用说我整天都在盯着同一块代码，所以我的大脑变得一团糟。要比尝试
时间长一点，灰色状态即将出现
的答案。我非常感谢您的回复！虽然您的解决方案工作得很好，但我现在不想在代码中添加另一个数据属性+谢谢你！反应很好！彻底的解释，以及替代的解决方案，使这成为我接受的答案。我也喜欢这样，我不必修改我的HTML+1我注意到，尽管这在桌面上非常有效，但它并没有在我的触摸设备上收集
click（）
事件。有什么想法吗？@stat30fbliss：我还没有为触摸设备编程，但我听说点击事件需要更长时间才能注册。我认为可以使用其他事件类型来解决问题。您需要对基于触摸的事件处理进行一些研究。
$('.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);
    });

});

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