Question

我有一个id =＆＃34;菜单＆＃34;在我的index.html文件中，我想使用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()函数绑定到事件。

Answer 2

与卢卡斯一起去＆＃39;回答或修改自己的代码

crtButton是一个jquery对象，因此它没有onclick属性。编辑DOM元素的onclick属性（即crtButton[0]）

或者只是跳过jQuery并使用getElementById

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

    function prepareEventHandlers() {
      var hideDiv = document.getElementById("menu");
      var crtButton = document.getElementById("hide");
      crtButton.onclick = function() {
        hideDiv.style.display = 'none'
      };
     }

如何使用jQuery隐藏div

2 个答案: