Question

html css div 隐藏的代码写法问题，求教

<script>
window.onload = function(){
var ms = document.getElementById("q0");document.getElementById("q0").style.display="block";
var add = document.getElementById("q1");document.getElementById("q1").style.display="none";
ms.onmouseover = function(){
add.style.display = "block";
};
ms.onmouseout = function(){
add.style.display = "none";
};
};
</script>

上面这段代码是 将 div 的id 分别为 q0 与 q1 在鼠标经过的时候，显示q1

由于一个页面里面只能加入一次 javascript
而我又想把 a0 a1； b0 b1； c0 c1
也想实现 q0 q1的效果。

所以考虑把 a0 a1 b0 b1 c0 c1 都写进 javascript里面去。
求问写法！
我琢磨了一下，这么写的，程序运行没问题，按照我预想的实现了状态，但是，我怎么觉得 这么写很累赘的，一定有更简便的写法，求大神来支招

Answer 1

1、方法1（使用 jQuery 框架），只需随意地使用多个“ready”函数即可：

$(document).ready(function(){
  //q0与q1
});
$(document).ready(function(){
  //a0与a1
});
$(document).ready(function(){
  //b0与b1
});

2、方法2（仍然使用原生Javascript），编写多个函数，

window.onload = function(){
//依次调用
q0q1();
a0a1();
}

function q0q1(){
//...
}

function a0a1(){
//...
}

追问

实在是抱歉 我初学，第一种方法能否 写的详细些，比如说 先写一个什么文件 存在哪里，然后那个文件怎么写的，怎么被引用的。

第二种方法 您能否写好了 然后给我截图一下啊，谢谢！

追答

针对你对问题的补充，你的意思是想把代码写得精简一点，而不想写得那么冗余。可以这么做：

window.onload = function(){
  setElem("q0", "q1");
  setElem("a0", "a1");
  setElem("b0", "b1");
  setElem("c0", "c1");
  //更多的你自己继续填吧...
}

//找出你所写的代码中可共用的地方，封装成一个函数
function setElem(id1, id2){
  elem1 = document.getElementById(id1);
  elem2 = document.getElementById(id2);

  elem1.style.display = "block";
  elem2.style.display = "none";

  elem1.onmouseover = function(){
    elem2.style.display = "block";
  };
  elem1.onmouseout = function(){
    elem2.style.display = "none";
  };
}

追问

十分感谢您的回答，我能否问下，在您的代码里面
Id1 id2因为没有引号引起来，所以可以表示 引号里面的q0 q1 a0 a1是吗？

追答

你对是否要用引号的问题感到迷惑，是因为你还未理解变量与值的区别。
用引号括起来的内容是一个字符串值，如"id1"是一个字符串值；
不用引号括起来的是一个变量，如 id1 是一个变量，它的值要等着你给它赋。

在定义参数的时候，id1、id2 不用引号括起来，是因为它们是在定义函数时的参数变量。而在具体调用的时候，要把具体的id字符串值传给函数，所以用引号括起来。

这种很基础的问题你应该看看教材的函数那一章，教材说的比我清楚。

追问

大侠 您给看看 是不是因为 缺少 var定义？

追答

是的，少了var声明的变量是自动视为全局变量，这个是涉及到作用域的问题，或者说是一个叫“闭包”的高级用法，初学者不容易理解。简单地说，用var声明的是局部变量，那么该函数内用var声明的变量只能在该函数内访问，函数执行完了以后就没有办法改变它的值了，而不用var声明的是全局变量，所有函数都能访问它、改它的值，比如你第一次调用setElem('q0','q1')时，它的值是q0这个元素，DC2则是q1这个元素，而后面再调用到a0a1,a2a3的时候DC2又变成了别的元素，所以DC2的值永远是你最后一次调用的那个元素，最终结果就是不论你鼠标指向哪个元素，都是最后这个元素在动。话说你要是真感兴趣的话，还是好好看下书吧，都是基础知识，书上有讲的，这样问下去问不完了