Question

把一段jquery代码写成javascript，出现了问题，不知道怎么修改。

原jQuery代码如下：浏览器都运行正常
$(document).ready(function(){
$('#wrap .wrap_frame .port_frame dl').each(function(){
$(this).mouseover(function(){
$('#wrap .wrap_frame .port_frame dl dd').removeClass('on');
$(this).children('dd').addClass('on');
}).mouseout(function(){
$(this).children('dd').removeClass('on');
});
});
});
转换成纯javascript，代码如下，有错误，：TypeError: field.children is not a function
function hasClass(ele,cls){
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls){
if(!this.hasClass(ele,cls)) {
ele.className += " "+cls;
}
}
function removeClass(ele,cls) {
if(hasClass(ele,cls)){
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className = ele.className.replace(reg,' ');
}
}
function MouOver(field){
var portDD = document.getElementsByTagName("dd");
for(var j = 0;j < portDD.length;j++){
removeClass(portDD[j],"on");
addClass(field.children('dd'),'on');
}
}
function MouOut(field){
removeClass(field.children('dd'),'on');
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else {
window.onload = function(){
oldonload();
func();
}
}
}
function handleMouse(){
var portDl = document.getElementsByTagName("dl");
for(var i = 0;i < portDl.length; i++){
portDl[i].mouseover = MouOver(this);
portDl[i].mouseout = MouOut(this);
}
}
addLoadEvent(handleMouse);

HTML代码如下
<div class="port_frame">
<dl class="port1">
<dt>
<a href="#">
<img src="port.gif" alt="port1" title="port1">
</a>
</dt>
<dd>
<ul>
<li>Port:</li>
<li>FE1</li>
<li>Auto Nego:</li>
<li></li>
<li>Speed</li>
<li></li>
</ul>
</dd>
</dl>
<dl class="port2">
<dt>
<a href="#">
<img src="port_2.gif" alt="port1" title="port1">
</a>
</dt>
<dd>
<ul>
<li>Port:</li>
<li>FE1</li>
<li>Auto Nego:</li>
<li></li>
<li>Speed</li>
<li></li>
</ul>
</dd>
</dl>
</div>
哪位大侠知道怎么回事呢？

Answer 1

function hasClass(ele,cls){

return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls){
for(var i=0; i<ele.length; i++) {
if(ele[i].nodeType != 3 && !this.hasClass(ele[i],cls)) {
ele[i].className += " "+cls;
}
}
}
function removeClass(ele,cls) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
for(var i=0; i<ele.length; i++) {
if(ele[i].nodeType != 3 && hasClass(ele[i],cls)){
ele[i].className = ele[i].className.replace(reg,' ');
}
}
}
function MouOver(field){
var portDD = document.getElementsByTagName("dd");
for(var j = 0;j < portDD.length;j++){
removeClass(portDD[j],"on");
addClass(field.childNodes,'on');
}
}
function MouOut(field){
removeClass(field.childNodes,'on');
}
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else {
window.onload = function(){
oldonload();
func();
}
}
}
function handleMouse(){
var portDl = document.getElementsByTagName("dl");
for(var i = 0;i < portDl.length; i++){
portDl[i].onmouseover = function() {
MouOver(this);
};
portDl[i].onmouseout = function() {
MouOut(this);
}
}
}
addLoadEvent(handleMouse);

Answer 2

眼都看花了 。自己用ie的调试工具吧。不行就用alert()一句一句的试 在不行就删方法 一个方法一个方法的试。应该是function MouOver(field) 参数的问题。我又没看到到你到底传的什么进去。。可能是我没仔细看 。－ －

Answer 3

.chileren() 是jquery的方法。
在原生JS中是未定义的。
查找子节点 childNode属性