拆分文件后JS不更新DOM

Question

只要HTML和JS / jQuery在同一个HTML文件中，这完全可以正常工作。 但是，由于可以从多个页面调用此方法，因此我将其拆分为单独的文件（我还认为它使代码更整洁，更易于阅读）。 也就是说，如果从所说的4到6页调用该函数，依此类推

我缺少使它在我的代码中显示回DOM的东西吗？

HTML如下：

<body>
<div class="menubar">
    <div id="Home" class="L0"><a href="#">Home</a><div id="breadcrumb"></div></div>
  <ul id="navigation_links">
    <li><a href="#" id="A" class="L1">Page A</a></li>
    <li><a href="#" id="B" class="L1">Page B</a>
        <ul>
          <li><a href="#" id="BA" class="L2">Page BA</a></li>
          <li><a href="#" id="BB" class="L2">Page BB</a></li>
          <li><a href="#" id="BC" class="L2">Page BC</a></li>
        </ul>
    </li>
    <li><a href="#" id="C" class="L1">Page C</a></li>
    <li><a href="#" id="D" class="L1">Page D</a></li>
    <li><a href="#" id="E" class="L1">Page E</a>
    <ul>
      <li><a href="#" id="EA" class="L2">Page EA</a></li>
      <li><a href="#" id="EB" class="L2">Page EB</a>
      <ul>
        <li><a href="#" id="EBA" class="L3">Page EBA</a></li>
        <li><a href="#" id="EBB" class="L3">Page EBB</a>
        <ul>
          <li><a href="#" id="EBBA" class="L4">Page EBBA</a></li>
          <li><a href="#" id="EBBB" class="L4">Page EBBB</a></li>
          <li><a href="#" id="EBBC" class="L4">Page EBBC</a></li>
        </ul></li>
        <li><a href="#" id="EBC" class="L3">Page EBC</a></li>
      </ul>
      </li>
      <li><a href="#" id="EC" class="L2">Page EC</a></li>
    </ul></li>
    <li><a href="#" id="F" class="L1">Page F</a></li>
    <li><a href="#" id="G" class="L1">Page G</a></li>
    <li><a href="#" id="H" class="L1">Page H</a></li>
  </ul>
</div>
</body>
</head>

有单独的JS文件，如下所示：

$(document).ready(function() {
  eventList = [];
  count = 0;
  ct = 0;
  //showBreadCrumb(eventList, count, ct);

});
$('a').bind('click', function () {
        mAr(this);
    });
 function mAr(inp){
  // alert(inp.outerHTML);

   if (inp.className == 'L1'){

         $('#breadcrumb').html(inp.innerHTML);
   }
   if (inp.className == 'L2'){
        $('#breadcrumb').html($(inp).parent().parent().parent().contents().get(0).innerHTML + " >> " + $(inp).html());
         //$('#breadcrumb').html(inp.parent());
   }
    if (inp.className == 'L3'){
        $('#breadcrumb').html($(inp).parent().parent().parent().parent().parent().contents().get(0).innerHTML + " >> " + $(inp).parent().parent().parent().contents().get(0).innerHTML + " >> " + $(inp).html());
         //$('#breadcrumb').html(inp.parent());
   }

      if (inp.className == 'L4'){
        $('#breadcrumb').html($(inp).parent().parent().parent().parent().parent().parent().parent().contents().get(0).innerHTML + " >> " + $(inp).parent().parent().parent().parent().parent().contents().get(0).innerHTML + " >> " + $(inp).parent().parent().parent().contents().get(0).innerHTML + " >> " + $(inp).html());
         //$('#breadcrumb').html(inp.parent());
   }
  }

$('a').each(function(){

  //alert(this.innerHTML);
});

所以我只需要它写回调用页面。

想法？

<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="file:///Users/User/Desktop/breadcrumb.js"></script>
</head>

Answer 1

控制台中显示什么？ 我刚刚设置了本地版本，并且看起来工作正常。 不知道为什么要包含这个奇怪的路径，您应该将项目保存在一个文件夹中，并保存html文件，然后添加一个名为js的子文件夹，并包含如下所示的js。

<body>

    <div class="menubar">
    <div id="Home" class="L0">
       <a href="#">Home</a>
       <div id="breadcrumb"> 
       </div>
    </div>
    <ul id="navigation_links">
        <li><a href="#" id="A" class="L1">Page A</a></li>
        <li><a href="#" id="B" class="L1">Page B</a>
    <ul>
      <li><a href="#" id="BA" class="L2">Page BA</a></li>
      <li><a href="#" id="BB" class="L2">Page BB</a></li>
      <li><a href="#" id="BC" class="L2">Page BC</a></li>
    </ul>
</li>
<li><a href="#" id="C" class="L1">Page C</a></li>
<li><a href="#" id="D" class="L1">Page D</a></li>
<li><a href="#" id="E" class="L1">Page E</a>
<ul>
  <li><a href="#" id="EA" class="L2">Page EA</a></li>
  <li><a href="#" id="EB" class="L2">Page EB</a>
  <ul>
    <li><a href="#" id="EBA" class="L3">Page EBA</a></li>
    <li><a href="#" id="EBB" class="L3">Page EBB</a>
    <ul>
      <li><a href="#" id="EBBA" class="L4">Page EBBA</a></li>
      <li><a href="#" id="EBBB" class="L4">Page EBBB</a></li>
      <li><a href="#" id="EBBC" class="L4">Page EBBC</a></li>
    </ul></li>
    <li><a href="#" id="EBC" class="L3">Page EBC</a></li>
  </ul>
  </li>
  <li><a href="#" id="EC" class="L2">Page EC</a></li>
</ul></li>
    <li><a href="#" id="F" class="L1">Page F</a></li>
    <li><a href="#" id="G" class="L1">Page G</a></li>
    <li><a href="#" id="H" class="L1">Page H</a></li>
  </ul>
</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src="js/main.js"></script>
</body> 
</html>