2010七月22
不要纠结于实现的圈套中
有的时候，过于钻牛角尖并不是什么好事，只会把自己越套越牢。换个思路，其实方法很简单。近来忙着改一些东西，需求来的时候真是锐不可挡。被越来越多的任务压的喘不过气来。
今天在写一个适应于所有游戏充值页面的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);
}
}
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);
}
}
}
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);
}
}
}
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对象的属性。头发都抓掉了好几根，仍然无果。
出去蹓跶了一会儿，不得不说，新鲜空气有利于思维发散，尤其今天对面公司选女演员，那真是美女如云啊。于是灵光一现，我为啥这么折磨自己呢？
var payTypes = ['snda', 'junnet', 'szx'];
for (var i = 0, len = payTypes.length; i < len; i++) {
setTypeRadioChange(payTypes[i]);
}
function setTypeRadioChange(payTypeName){
var Radios = document.getElementsByName(payTypeName + "_amount");
for (var j = 0, rLen = Radios.length; j < rLen; j++) {
Radios[j].onclick = function(){
changePaytype('pay_' + payTypeName, this.value);
}
}
}
for (var i = 0, len = payTypes.length; i < len; i++) {
setTypeRadioChange(payTypes[i]);
}
function setTypeRadioChange(payTypeName){
var Radios = document.getElementsByName(payTypeName + "_amount");
for (var j = 0, rLen = Radios.length; j < rLen; j++) {
Radios[j].onclick = function(){
changePaytype('pay_' + payTypeName, this.value);
}
}
}
多简单啊，我将typeName传进函数里不就成了嘛，自己真是个猪头。
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/07/22/1822/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
看不懂代码的飘过～ :???:
[回复]
楼主是盛大的吗？对面公司选美女？哪个公司？
[回复]
@elvis
360的，对面公司是一传媒公司。。当天可能在挑演员。。
[回复]