Jquery 插件/范围问题答案

【问题标题】：Jquery plugin/scop questionJquery 插件/范围问题
【发布时间】：2011-05-05 20:06:04
【问题描述】：

在 jquery 方面我是一个相对新手；如果有人有耐心将我链接到有用的东西，我的问题可能与范围有关，也许与插件有关。

下面的代码可以工作，但是我必须将脚本放在同一个 div 中才能真正工作。出于 CMS 集成/可读性的目的，我无法将其移至页面顶部，或者理想情况下，移至另一个库/源文件。任何指点将不胜感激，谢谢。

<a id="hide" href="#" style="z-index:20;">hide</a>
<a id="show" href="#" style="z-index:20;">show</a>

<div id="block" style="position:absolute;background:#fff;width:450px;height:450px;">
</div>
<div id="myBox" style="width:450px;height:450px;" >
<ul id ="menuElem" class="CMSListMenuUL">
     <li><a href="#">a</a></li>
     <li><a href="#">b</a></li>
     <li><a href="#">c</a></li>
</ul>           
</div>
<script>

$("#show").click(function () {
  $("#block").fadeOut(1000);
  return false;
}); 
$("#hide").click(function () {
  $("#block").fadeIn(1000);
  return false;
}); 
</script>

【问题讨论】：

原因是如果你把它放在页面完全加载到DOM之前它运行的头部，如果你把它放在$(document).ready()事件中，那么它在它被引入DOM之后运行（换句话说，当文档准备好时）。
对了！谢谢，我还停留在我的 php/c++ 思维模式中。

标签： jquery plugins scope

【解决方案1】：

试试这个

<script>
$(document).ready(function () {
  $("#show").click(function () {
    $("#block").fadeOut(1000);
    return false;
  }); 
  $("#hide").click(function () {
    $("#block").fadeIn(1000);
    return false;
  }); 
});
</script>

这会等待脚本运行，直到文档加载完毕。

【讨论】：