Question

我有一个我正在处理的应用程序并且已经尝试了几个小时来解决这个问题，其中包括各种建议。当我运行代码内联它工作正常。我不想将相同的代码粘贴到我的HTML中两次，因此我创建了外部.js文件并将其调用。当我调用.js文件时，出现"("#" + panelName).addClass is not a function错误。当我运行内联代码时，它运行得很好。我必须每隔几分钟刷新一次屏幕，并希望保持折叠面板的状态，以便我在localstorage中写入一个标志，然后在页面重新加载时检索它。然后应该通过设置类来设置面板状态。我不知道为什么它不起作用。我是JS的新手，所以要善待:)

这是代码。 SaveState.js文件工作得很好。

   <h4 class="panel-title">
      <a data-toggle="collapse" href="#collapse1" onclick="SaveState('collapse1')">Station 1</a>
   </h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
   <script type="text/javascript"> var panelName = 'collapse1' </script>
   <script type="text/javascript">
       if (localStorage.getItem(panelName) === 'open') {
           $('#' + panelName).addClass('panel-collapse collapse in');
       }
   </script>

   @*<script type="text/javascript" src="~/Scripts/SetCollapseState.js"></script>  *@
   <div class="panel-body">Panel Body</div>
   <div class="panel-body">Panel Body1</div>
   <div class="panel-body">Panel Body2</div>
   <div class="panel-body">Panel Body3</div>
   <div class="panel-footer" style=""></div>
</div>

Answer 1

我能够通过在div id之前输入$来获得对addClass的引用.....我正在使用Jquery并且真的想知道为什么这会有所不同。谢谢大家的时间。

function SetCollapseState（panelName）{

if (localStorage.getItem(panelName) === 'open') {
    $('#' + panelName).addClass('panel-collapse collapse in')

}

};

Answer 2

确保jQuery包含在脚本的顶部。并清理代码以匹配下面的内容：

    <h4 class="panel-title">
      <a data-toggle="collapse" href="#collapse1" onclick="SaveState('collapse1')">Station 1</a>
    </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
    <script type="text/javascript"> 
      var panelName = 'collapse1';
      if (localStorage.getItem(panelName) === 'open') {
        $('#' + panelName).addClass('panel-collapse collapse in');
      }
    </script>
  @*<script type="text/javascript" src="~/Scripts/SetCollapseState.js"></script>*@
  <div class="panel-body">Panel Body</div>
  <div class="panel-body">Panel Body1</div>
  <div class="panel-body">Panel Body2</div>
  <div class="panel-body">Panel Body3</div>
  <div class="panel-footer" style=""></div>
</div>

Javascript函数在JS文件中不起作用

2 个答案: