jQuery 代码未使用 $(function(){..} 运行);但会在没有它的情况下运行

我对jQuery很陌生，但从我读到的内容来看，这对我来说没有意义。这是我的代码：

$(function() {
    function grid() {
        $("#main").hide();
    }
});
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="numbers.js"></script>
  </head>
  <body>
    <div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
      <button onclick="grid()">grid</button>
    </div>
  </body>
</html>

当我在我的代码周围放$(function(){...});时，它永远不会运行，控制台返回ReferenceError: grid is not defined，但如果我删除$(function(){...});那么一切正常。

$(function() { })中的代码有自己的作用域，因此当您在其中定义一个函数时，该函数仅存在于该作用域内。但是，您有：

<button onclick="grid()">grid</button>

它在全局范围内查找名为"grid"的函数（不存在）。

理想情况下，如果你使用的是jQuery，你会做一些更像的事情：

<button id="grid">grid</button>
$(function(){
    $('#grid').on('click', function() {
        $("#main").hide();
    });
});

你可以调用一个javascript函数或定义onclick监听器里面的按钮$(document).ready

// using jquery 
$(document).ready(function() {
    $('#grid').click(function(){
        $("#main").hide();
    });
});
// using javascript function
function grid(){
   document.getElementById('main').style.display = 'none';
}

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="numbers.js"></script>
  </head>
  <body>
    <div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
      <button id="grid">grid</button>
       <button onclick="grid()">grid2</button>
    </div>
  </body>
</html>

相关内容

最新更新

热门标签：