在jquery中增加变量click（） [英] Incrementing variable within jquery click()

问题描述

使用此代码，我试图动态绑定一个单击事件到一个元素，并引用一个增量变量：

  < script type =text / javascriptsrc =/ js / jquery-1.5.1.min.js>< / script> 
< script language =javascript> 
 $（document）.ready（function（）{
 function preprocessPage（id）{
 $（'。nextPage'）。 + id）; 
}）; 
} 
 
 function showPage（id）{
 console.log（'showing：'+ id）; 
 preprocessPage（id）; 
} 
 
 
 showPage（1）; // init 
}）; 
  

 < div class =nextPage>显示下一页< / div> 
  

当页面加载时，它似乎按预期工作。第一次点击似乎工作。然后事情变得棘手。它似乎多次运行代码（增加一个因子2）这里是你会看到在firebug控制台，如果你单击div 4次（第一个日志行发生在初始化加载后）：

显示：1

显示：2

$ b b

显示：3

显示：3

显示：4

显示：4

显示：4

显示：4

显示：5

显示：5

< 5

显示：5

显示：5

显示：5

显示：5

显示：5

请帮助！这是怎么回事？提前感谢....

解决方案

每次点击调用显示页面都会向与选择器匹配的元素添加一个新的onclick处理程序 .nextPage 。

有时，最好在头部或纸上执行代码以了解发生了什么。我强调了事情失控的事件。

1. 致电 showPage（1）


2. print 显示第1页


3. 调用 preprocessPage（1）


4. 将onclick处理程序A添加到 .nextPage


5. 单击 .nextPage


6. 将处理程序A中的 id 从1增加到2


7. showPage（2）


8. 打印显示第2页


9. 调用 preprocessPage（2）。


10. 将onclick处理程序B添加到 .nextPage


11. 点击 .nextPage


12. 将处理程序A中的 id 从2增加到3


13. 调用 showPage（3）


14. 打印显示第3页


15. preprocessPage（3）


16. 将onclick处理程序C添加到 .nextPage / li>
    
17. 将处理程序B中的 id 从2增加到3


18. 调用 showPage（3）


19. 打印显示第3页


20. 调用 preprocessPage（3）


21. 将onclick处理程序D添加到 .nextPage


22. ...

您正在寻找

  $（document）.ready（function（）{
 
 function showPage （id）{
 console.log（'showing：'+ id）; 
} 
 
 //从第1页开始
 var id = 1; 
 //显示第一页
 showPage（id）; 
 //使用class =nextPage
 $（'。nextPage'）为每个元素添加onclick处理函数click（function（）{
 //增加页面ID，然后调用showPage与当前id 
 showPage（++ id）; 
}）; 
}）; 
  




With this code, I'm trying to dynamically bind a click event to an element and reference an incremented variable:

<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
<script language="javascript">
$(document).ready(function() {
function preprocessPage(id){    
        $('.nextPage').click(function(){
            showPage(++id);
        });
    }

function showPage(id){
    console.log('showing: '+id);
        preprocessPage(id);
    }   


showPage(1);//init
});

<div class="nextPage">show next page</div>

When the page loads, it seems to work as expected. And the first click seems to work. Then things get screwy. It seems to run through the code multiple times (increasing by a factor of 2) Here's what you'd see in the firebug console if you click the div 4 times (the first log line occurs after the init load):

showing: 1

showing: 2

showing: 3

showing: 3

showing: 4

showing: 4

showing: 4

showing: 4

showing: 5

showing: 5

showing: 5

showing: 5

showing: 5

showing: 5

showing: 5

showing: 5

Please help! What's going on? Thanks in advance....

解决方案

Each click calls show page that adds a new onclick handler to the elements matched with the selector .nextPage.

Sometimes it's good to execute the code in your head or in paper to understand what's going on. I've emphasized the events where things get out of hand.

1. call showPage(1)
2. print showing page 1
3. call preprocessPage(1)
4. add onclick handler A to .nextPage
5. click .nextPage
6. Increment the id in handler A from 1 to 2
7. Call showPage(2)
8. print showing page 2
9. Call preprocessPage(2).
10. add onclick handler B to .nextPage
11. click .nextPage
12. Increment the id in handler A from 2 to 3
13. Call showPage(3)
14. print showing page 3
15. call preprocessPage(3)
16. add onclick handler C to .nextPage
17. Increment the id in handler B from 2 to 3
18. call showPage(3)
19. print showing page 3
20. call preprocessPage(3)
21. add onclick handler D to .nextPage
22. ...

The following should be closer to what you are looking for

$(document).ready(function() {

    function showPage(id){
      console.log('showing: ' + id);
    }   

    // Start with page 1
    var id = 1;
    // Show the first page
    showPage(id);
    // Add onclick handler to each element with class="nextPage"
    $('.nextPage').click(function(){
         // Increment the page id and then call showPage with the current id
         showPage(++id);
    });
});

这篇关于在jquery中增加变量click（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！