zoukankan      html  css  js  c++  java
  • JavaScript循环出现的问题——用闭包来解决

    在for循环中,数组长度为3,我本来是想对每个循环的元素绑定一个点击事件的,结果点击后控制台输出全部为1。

     1 for (var i = 0; i < data.data.length; i++) {
     2     $('.lands').append(
     3         '<button type="button" class="land land' + `${i % 3 + 1}` + '">
     4             <div class="soil">
     5                 <!-- 成长中的树 -->
     6                 <div class="tree-wrap">
     7                     <img src="../../images/flowering_tree.png" alt="开花中的树" class="tree">
     8                     <div class="land-bubble land-bubble__top watering">
     9                         <img src="../../images/watering.png" alt="浇水">
    10                     </div>
    11                     <div class="gif gif-top watering-gif">
    12                         <img src="../../images/gif/watering.gif" alt="浇水动画">
    13                     </div>
    14                 </div>
    15                 <div class="soil-tips">'+ list[i].farmName + list[i].cropTypes + '</div>
    16                 <a onClick = detail(' + list[i].farmId + ') class="gofarm-btn">去农场看看</a>
    17             </div>
    18         </button>'
    19     );
    20 
    21     var className = '.land' + `${i % 3 + 1}`
    22     console.log(className)
    23     $(className).click(function(){
    24         console.log(`${i % 3 + 1}`)
    25     })    
    26 }

    我觉得这与闭包的知识有关,由于i是全局的作用域,相当于同一个引用,等循环执行完,最终的i的值为i%3+1=1,然后在点击的时候输出的便全部为1了。

    解决方案:加一个立即执行函数,暂时保存i的值到函数里成为j,这样就形成了一个闭包,每个函数里的j各不相同,在内存中是不同的引用,从而解决了这个问题。

     1 for (var i = 0; i < data.data.length; i++) {
     2     $('.lands').append(
     3         '<button type="button" class="land land' + `${i % 3 + 1}` + '">
     4             <div class="soil">
     5                 <!-- 成长中的树 -->
     6                 <div class="tree-wrap">
     7                     <img src="../../images/flowering_tree.png" alt="开花中的树" class="tree">
     8                     <div class="land-bubble land-bubble__top watering">
     9                         <img src="../../images/watering.png" alt="浇水">
    10                     </div>
    11                     <div class="gif gif-top watering-gif">
    12                         <img src="../../images/gif/watering.gif" alt="浇水动画">
    13                     </div>
    14                 </div>
    15                 <div class="soil-tips">'+ list[i].farmName + list[i].cropTypes + '</div>
    16                 <a onClick = detail(' + list[i].farmId + ') class="gofarm-btn">去农场看看</a>
    17             </div>
    18         </button>'
    19     );
    20 
    21     (function(j){
    22         var className = '.land' + `${j % 3 + 1}`
    23         console.log(className)
    24         $(className).click(function(){
    25             console.log(`${j % 3 + 1}`)
    26         })
    27     })(i)        
    28 }
  • 相关阅读:
    trackr: An AngularJS app with a Java 8 backend – Part III
    trackr: An AngularJS app with a Java 8 backend – Part II
    21. Wireless tools (无线工具 5个)
    20. Web proxies (网页代理 4个)
    19. Rootkit detectors (隐形工具包检测器 5个)
    18. Fuzzers (模糊测试器 4个)
    16. Antimalware (反病毒 3个)
    17. Debuggers (调试器 5个)
    15. Password auditing (密码审核 12个)
    14. Encryption tools (加密工具 8个)
  • 原文地址:https://www.cnblogs.com/luoyihao/p/11339069.html
Copyright © 2011-2022 走看看