添加实际内容时代码功能会中断吗？

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以深度优先遍历（文档顺序）查看所有后代。当你拥有你的模板时，这很好，但当你把你的真实内容放入（大概是divs）时，你就搞砸了。

您可以使用.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-*属性等。