技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> JavaScript --> 不要纠结于实现的圈套中

不要纠结于实现的圈套中

浏览:1826次  出处信息

    有的时候，过于钻牛角尖并不是什么好事，只会把自己越套越牢。换个思路，其实方法很简单。近来忙着改一些东西，需求来的时候真是锐不可挡。被越来越多的任务压的喘不过气来。

    今天在写一个适应于所有游戏充值页面的js，希望大多数页面可以共用一套js，方便维护。在这个过程中，遇到了如下问题：

首先写实现如下：

var sndaRadios = document.getElementsByName("snda_amount");
for (var i = 0, len = sndaRadios.length; i < len; i++) {
    sndaRadios[i].onclick = function(){
        changePaytype('pay_snda', this.value);
    }
}

var junnetRadios = document.getElementsByName("junnet_amount");
for (var i = 0, len = junnetRadios.length; i < len; i++) {
    junnetRadios[i].onclick = function(){
        changePaytype('pay_junnet', this.value);
    }
}

var szxRadios = document.getElementsByName("szx_amount");
for (var i = 0, len = szxRadios.length; i < len; i++) {
    szxRadios[i].onclick = function(){
        changePaytype('pay_szx', this.value);
    }
}

其实这都是一样的东西，无非就是每个radio组的名字不同。所以我想用一个数组循环来做：

var payTypes = ['snda', 'junnet', 'szx'];
for (var i = 0, len = payTypes.length; i < len; i++) {
    var Radios = document.getElementsByName(payTypes[i] + "_amount");
    for (var j = 0, rLen = Radios.length; j < rLen; j++) {
        Radios[j].onclick = function(){
            changePaytype('pay_' + payTypes[i], this.value);
        }
    }
}

但是这样又会发现页面报错，因为在写onclick的时候，其实是做了一个闭包，这时候的payTypes[i]其实是payTypes[3]即undefined。

难道要这样？

var payTypes = ['snda', 'junnet', 'szx'];
for (var i = 0, len = payTypes.length; i < len; i++) {
    var Radios = document.getElementsByName(payTypes[i] + "_amount");
    for (var j = 0, rLen = Radios.length; j < rLen; j++) {
    Radios.type = i;
        Radios[j].onclick = function(){
            changePaytype('pay_' + this.type, this.value);
        }
    }
}

不过为DOM元素新建属性，怎么感觉都是怪怪的。

于是，纠结于此现象中无法自拔，苦苦思索怎么使用这种结构，却不破坏DOM对象的属性。头发都抓掉了好几根，仍然无果。

出去

建议继续学习：

  1. PHP Simple HTML DOM Parser 是一个不错的html/xml分析类    (阅读：5769)
  2. for 循环为何可恨？    (阅读：4439)
  3. 理解Javascript的闭包    (阅读：3812)
  4. GC与JS内存泄露    (阅读：3454)
  5. phpQuery:像jQuery一样处理DOM    (阅读：3315)
  6. 仅100行的JavaScript DOM操作类库    (阅读：3361)
  7. JavaScript的闭包问题    (阅读：3297)
  8. 闭包漫谈（从抽象代数及函数式编程角度）    (阅读：3157)
  9. 对大量子节点DOM操作的最佳实践方式    (阅读：3129)
  10. 在回调和闭包中的内存泄漏    (阅读：3024)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：关于动态创建script元素
后一篇：JS操作iframe里的dom >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1