IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

不要纠结于实现的圈套中

小小子,simaopig 2010-07-22 20:05:56 累计浏览 2,405 次
本机暂存

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

    今天在写一个适应于所有游戏充值页面的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. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,349)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  8. 什么是全栈工程师? (累计阅读 14,038)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,735)
  10. 7 天打造前端性能监控系统 (累计阅读 11,187)