Question

我对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(){...});，那么一切都会正常运行。

Answer 1

$(function() { })中的代码具有其自己的范围，因此，在其中定义函数时，该函数仅存在于该范围内。但是，您有：

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

在全局范围（不存在）中寻找一个名为“ grid”的函数。

理想情况下，如果您使用的是jQuery，则可以执行以下操作：

<button id="grid">grid</button>

$(function(){
    $('#grid').on('click', function() {
        $("#main").hide();
    });
});

Answer 2

您可以调用JavaScript函数或在$(document).ready内定义按钮的onClick侦听器

// 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>

jQuery代码未与$（function（）{...}）一起运行；但没有它就会运行

2 个答案: