Question

我有这个jQuery脚本，我不完全理解。我想知道为什么我不能用类或id替换兄弟姐妹（'div'）？我认为我的代码无法正常工作。我试图做的是用点击按钮替换一些内容，然后用第二个功能替换第二个内容。所有的课程都被院系所取代，但院系不会被部门取代，当我按下一个部门时，他们都会在一个部门之下展示一个

$(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

我不确定我完全理解你的问题但你可以尝试这个

     $(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 () {
            $('.col-md-9').find('[id^="fac"]').hide()
            $('.col-md-9').find('[id^="dep"]').hide()
            var department_id = $(this).attr('id');
            $('#' + department_id + '_tab').show().siblings('div').hide();
        });
    });

Answer 2

部门不能互相替换，因为他们不是兄弟姐妹。它们存在不同的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();
    });
});

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

2 个答案: