ReferenceError: $showExpanded is not defined, but it cleary is

Question

大家好，我对 similar 问题做了一些研究，我尝试了给定的解决方案，但我仍然不明白为什么它不起作用。每个人都说你必须使用 document ready 函数。现在有些解决方案说我必须删除它？我真的没有发现代码有问题。

有人可以向我清楚地解释为什么这不起作用吗？我很好奇。感谢您的努力。

代码如下：

$(document).ready(function(){
  $('#expandSearch').css('display', 'none');
  $('#easySearch').css('display', 'block');

  function showExpanded(){
    $('#expandSearch').css('display', 'block');
    $('#easySearch').css('display', 'none');
  }

  function removeExpanded(){
    $('#expandSearch').css('display', 'none');
    $('#easySearch').css('display', 'block');
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="easySearch">
  easySearch
  <p onclick="showExpanded">Show expanded</p>
</div>
<div id="expandSearch">
  expandSearch
  <p onclick="removeExpanded">Remove expanded</p>
</div>

Answer 1

您应该在 onclick 属性中使用 ()：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="easySearch">
  easySearch
  <p onclick="showExpanded()">Show expanded</p>
</div>
<div id="expandSearch">
  expandSearch
  <p onclick="removeExpanded()">Remove expanded</p>
</div>

Answer 2

您应该在 document.ready 之外定义函数，并使用 () 和 onclick

function showExpanded(){
    $('#expandSearch').css('display', 'block');
    $('#easySearch').css('display', 'none');
  }

  function removeExpanded(){
    $('#expandSearch').css('display', 'none');
    $('#easySearch').css('display', 'block');
  }

$(document).ready(function(){
  $('#expandSearch').css('display', 'none');
  $('#easySearch').css('display', 'block');

  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="easySearch">
  easySearch
  <p onclick="showExpanded()">Show expanded</p>
</div>
<div id="expandSearch">
  expandSearch
  <p onclick="removeExpanded()">Remove expanded</p>
</div>

Answer 3

错误是由于您在 onclick 属性中的函数名称后缺少 ()，例如：

<p onclick="removeExpanded()">Remove expanded</p>

这些函数也需要在 window 的范围内声明，因此您需要将它们移到 document.ready 事件处理程序之外。

但是，您根本不应该使用过时的 on* 事件属性。您应该改用不显眼的事件处理程序。由于您已经在使用 jQuery，您可以这样做：

$(document).ready(function(){
  $('.show-expanded').click(function() {
    $('#expandSearch').show()
    $('#easySearch').hide();
  });

  $('.remove-expanded').click(function() {
    $('#expandSearch').hide()
    $('#easySearch').show();
  });
});

#expandSearch { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="easySearch">
  easySearch
  <p class="show-expanded">Show expanded</p>
</div>
<div id="expandSearch">
  expandSearch
  <p class="remove-expanded">Remove expanded</p>
</div>

另请注意使用 CSS 在加载时隐藏 #expandSearch 元素。这是在 JS 运行之前执行的，因此它将避免任何 FOUC。

Answer 4

使用 jQuery，您可以将事件声明和事件处理程序以更简洁的方式移至 JavaScript 代码：

var $search = $('#easySearch, #expandSearch');

$search.find('p.expander').on('click', function () {
  $search.toggle();
});

#expandSearch {display: none;}
p.expander {cursor: pointer;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="easySearch">
  easySearch
  <p class="expander">Show expanded</p>
</div>
<div id="expandSearch">
  expandSearch
  <p class="expander">Remove expanded</p>
</div>

ReferenceError: $showExpanded is not defined, but it cleary is

ReferenceError: $showExpanded is not defined, but it cleary is

javascript

jquery

document-ready

referenceerror