ReferenceError：$ showExpanded未定义，但它很明确

Question

嘿伙计们我已经对similar问题做了一些研究，我尝试了给定的解决方案，但我仍然不明白为什么它不起作用。 每个人都说你必须使用library(tidyverse) Total %>% map(~.[[2]]) %>% #or as suggested in the comments #map(2) %>% reduce(`+`) - 函数。 现在一些解决方案说我必须删除它？ 我真的没有看到代码的问题。

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

这是代码：

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');
  }

});

Answer 1

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

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

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

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

＆＃13;

＆＃13;

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

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

＆＃13;

#expandSearch { display: none; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

您应该在()属性中使用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 3

您应该定义document.ready之外的功能，并使用() <{1}}

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');

  
});

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>