javascript - 添加实际内容时代码功能中断？

Question

下面是运行良好的虚拟代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
    <ul class="navbar-nav" id="sideNav">
      <li id="campaignsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
      </li>
      <li id="subscribersNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
      </li>
      <li id="reportsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
      </li>
    </ul>
  </nav>

  <div id="wrapper">
    <div id="campaignsPage">
      <p>This is campaign Page</p>
    </div>
    <div id="subscribersPage">
      <p>This is subscribers page</p>
    </div>
    <div id="reportsPage">
      <p>MUSIC PAGE reports</p>
    </div>
  </div>
</div>
$('#campaignsPage, #subscribersPage, #reportsPage').hide();

$("#sideNav li").each(function(i) {
  $(this).click(function() {
    $("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();
  });
});

但是当我在 div 中添加实际内容时:

<div id="campaignsPage">
      <p>My actual code with a form and multiple container to hold other information.</p>
    </div>

上面的工作代码停止，每次点击之前显示不同内容的菜单项都会停止。谁能建议我哪里做错了。

Answer 1

问题出在这里:

$("#wrapper").find("div:eq('" + i + "')").show().siblings().hide();

find 以深度优先遍历(文档顺序)遍历所有后代。如果您只有自己的模板，那很好，但是当您将真正的内容放入(大概是 div)时，您就会搞砸了。

您可以使用 .children 而不是 .find 来修复它。示例:

$('#campaignsPage, #subscribersPage, #reportsPage').hide();

$("#sideNav li").each(function(i) {
  $(this).click(function() {
    $("#wrapper").children("div:eq('" + i + "')").show().siblings().hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
    <ul class="navbar-nav" id="sideNav">
      <li id="campaignsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
      </li>
      <li id="subscribersNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
      </li>
      <li id="reportsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
      </li>
    </ul>
  </nav>

  <div id="wrapper">
    <div id="campaignsPage">
      This is campaign Page
      <div>I'm a div</div>
      <div>I'm another div</div>
    </div>
    <div id="subscribersPage">
      <p>This is subscribers page</p>
    </div>
    <div id="reportsPage">
      <p>MUSIC PAGE reports</p>
    </div>
  </div>
</div>

也就是说，我不会那样做。您已经通过 id(campaignsNav 控制 campaignsPage 等)关联了这些部分，所以我可能只是这样关联它们:

$("#sideNav li").click(function() {
  var target = "#" + this.id.replace(/Nav$/, "Page");
  $(target).siblings().hide().end().show();
});

例子:

$('#campaignsPage, #subscribersPage, #reportsPage').hide();

$("#sideNav li").click(function() {
  var target = "#" + this.id.replace(/Nav$/, "Page");
  $(target).siblings().hide().end().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#" style="display: inline-block; width:250px;">Logo Image</a>
    <ul class="navbar-nav" id="sideNav">
      <li id="campaignsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Campaigns</strong></a>
      </li>
      <li id="subscribersNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Subscribers</strong></a>
      </li>
      <li id="reportsNav">
        <a class="nav-link" href="#" style="margin-left:30px;"><strong>Reports</strong></a>
      </li>
    </ul>
  </nav>

  <div id="wrapper">
    <div id="campaignsPage">
      This is campaign Page
      <div>I'm a div</div>
      <div>I'm another div</div>
    </div>
    <div id="subscribersPage">
      <p>This is subscribers page</p>
    </div>
    <div id="reportsPage">
      <p>MUSIC PAGE reports</p>
    </div>
  </div>
</div>

其他选项可以是 data-* 属性等。