javascript - jquery - 无法使用函数显示所需的内容

Question

我有一个我不完全理解的 jQuery 脚本。我想知道为什么我不能用类或 ID 替换 sibling ('div')？我认为我的代码无法正常工作。我试图做的是用单击按钮替换一些内容，然后用第二个功能替换第二个内容。 所有类(class)都被学院取代，但学院不会被部门取代，当我按一个部门时，他们都显示一个在另一个之下

$(document).ready(function() {
  $('.btnClick').on('click', function() {
    var faculty_id = $(this).attr('id');
    $('#' + faculty_id + '_tab').show().siblings('div').hide();
  });
  $('.btnClick2').on('click', function() {
    var department_id = $(this).attr('id');
    $('#' + department_id + '_tab').show().siblings('div').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3">
    <div class="jumbotron">
      <h4>Search courses</h4>
      <hr>
      <br>
      <ul>
        <li class="btnClick" id="fac_1">Faculty of Mathematics and Informatics</li>
        <ul>
          <li class="btnClick2" id="dep_1">Mathematics and Informatics</li>
          <ul>
            <li>Informatics</li>
            <li>Mathematics</li>
          </ul>
        </ul>
        <li class="btnClick" id="fac_2">Faculty of Medicine</li>
        <ul>
          <li class="btnClick2" id="dep_2">Medicine</li>
          <ul>
            <li>Medical Sciences</li>
          </ul>
        </ul>
      </ul>
    </div>
  </div>
  <div class="col-md-9">
    <div class="jumbotron">
      <div>
        <h3>All courses</h3>
        <ul>
          <li>
            <a class="first" href=artificial-intelligence>Artificial Intelligence</a>
          </li>
          <li>
            <a class="first" href=software-engineering>Software Engineering</a>
          </li>
          <li>
            <a class="first" href=surgery>Surgery</a>
          </li>
        </ul>
      </div>
      <div id="fac_1_tab" style="display:none;">
        <h3> Faculty of Mathematics and Informatics courses</h3>
        <ul>
          <li>
            <a class="first" href=artificial-intelligence>Artificial Intelligence</a>
          </li>
          <li>
            <a class="first" href=software-engineering>Software Engineering</a>
          </li>
        </ul>
      </div>
      <div id="fac_2_tab" style="display:none;">
        <h3> Faculty of Medicine courses</h3>
        <ul>
          <li>
            <a class="first" href=surgery>Surgery</a>
          </li>
        </ul>
      </div>
      <ul>
        <div id="dep_1_tab" style="display:none;">
          <h3>Department of Mathematics and Informatics courses</h3>
          <ul>
            <li>
              <a class="first" href=artificial-intelligence>Artificial Intelligence</a>
            </li>
            <li>
              <a class="first" href=software-engineering>Software Engineering</a>
            </li>
          </ul>
        </div>
      </ul>
      <ul>
        <div id="dep_2_tab" style="display:none;">
          <h3>Department of Medicine courses</h3>
          <ul>
            <li>
              <a class="first" href=surgery>Surgery</a>
            </li>
          </ul>
        </div>
      </ul>
    </div>
  </div>
</div>

如果有帮助，这里还有 django 中的完整代码:https://pastebin.com/y9tHNbax

Answer 1

部门不能互相替换，因为他们不是 sibling 。它们存在于不同的 ul 中。如果所有部门都相同 ul 它可以正常工作

检查一下。它可以满足您的需要

jsfiddle link

    $(document).ready(function () {
    $('.btnClick').on('click', function () {
    $('.col-md-9').find('[id^="dep"]').hide()
        var faculty_id = $(this).attr('id');
        $('#' + faculty_id + '_tab').show().siblings('div').hide();
    });
    $('.btnClick2').on('click', function () {
        var department_id = $(this).attr('id');
        $('#fac_' + department_id.split('_')[1] + '_tab').show().siblings('div').hide();
        $('#' + department_id + '_tab').show().siblings('div').hide();
    });
});