javascript - 如何使用 jQuery 隐藏 div

Question

我的 index.html 文件中有一个 id="menu"的 div，我想使用 jQuery 隐藏它。在我的 script.js 中我写道:

window.onload = function() {
  prepareEventHandlers();
}

function prepareEventHandlers() {
  var hideDiv = $("#menu");
  var crtButton = $("#hide");
  crtButton.onclick = function() {
    hideDiv.hide();
  };
 }

但是当我按下网页上的按钮时，div 仍然存在，唯一有效的方法是在我编写的 index.html 中:

 <button type="button" onclick="$('#menu').hide()" id="hide">HideDiv</button>

但我不想使用它，因为它的风格很糟糕，那么如何使用我的 script.js 代码来完成这项工作？

Answer 1

crtButton.onclick 不起作用，因为 crtButton 是一个 jQuery 对象，而不是 DOM 元素。

这样做:

$(document).ready(function() {
    $("#hide").on("click", function() {
        $("#menu").hide();
    });
}

这是jQuery 方式。请注意，我将 window.onload 替换为 $(document).ready回调，一旦 DOM 准备好(早于 onload)就会被调用。我还使用了.on()绑定(bind)到事件的函数。