工作之中的不足，报了js培训班，因为工作加班原因缺了几天课（js组件开发），现在拾起来补补
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="智能社 - zhinengshe.com" /> <meta name="copyright" content="智能社 - zhinengshe.com" /> <title>智能社 - www.zhinengshe.com</title> <!-- 写组件的步骤： 1 先布局 写css 2 创建元素 插入到指定位置 3 添加事件 4 联动 5 隐藏系统元素 6 封装 1 js 2 css --> <script src="myRadio.js"></script> <script> //var added = true; window.onload = function(){ myRadio("sex"); myRadio("city"); }; </script> </head> <body> <form id="form1" action="http://www.zhinengshe.com/" > <input type="radio" name="sex" value="male"/>男 <input type="radio" name="sex" value="female"/>女 <input type="radio" name="sex" value="unknow" />未知 <br /> <input type="radio" name="city" value="city1"/>city1 <input type="radio" name="city" value="city2"/>city2 <input type="radio" name="city" value="city3" />city3 <input type="submit"/> </form> </body> </html>
//版权 北京智能社©, 保留所有权利 (function(){ var added = false; console.log('1'); window.myRadio = function (name){ var aRadio = document.getElementsByName(name); var aSpan = []; //创建span for(var i = 0; i < aRadio.length; i++){ var oSpan = document.createElement("span"); aSpan.push(oSpan); oSpan.className = "my_radio"; aRadio[i].parentNode.insertBefore(oSpan,aRadio[i]); (function(index){ oSpan.onclick = function(){ for(var i = 0; i < aSpan.length; i++){ aSpan[i].className = "my_radio"; } this.className = "my_radio_active"; aRadio[index].checked = true; }; })(i); aRadio[i].style.display = "none"; } console.log('aaaaaa'); if(added) return; console.log('2'); added = true; console.log('3'); var oLink = document.createElement("link"); oLink.rel = "stylesheet"; oLink.href = "myRadio.css"; var oHead = document.getElementsByTagName("head")[0]; oHead.appendChild(oLink); } })();
