在 django 模板中正确使用引导程序

Question

我有这个模型的层次顺序：课程、学习计划、部门和院系。我在引导程序中有 2 列。第一栏列出了所有学院，以及他们的具体部门和每个部门的学习计划。第二列列出了所有课程。我希望当有人点击一个教师时，通过替换所有课程在第二列中显示该教师的特定课程，对于部门或学习计划也是如此。现在，我尝试了一些东西，但我不知道如何达到这个结果。我不知道如何列出每个学院的课程，正如你所注意到的，我把 faffties.0 作为测试。

<script>
        $('#btnClick').on('click', function () {
            if ($('#1').css('display') != 'none') {
                $('#2').show().siblings('div').hide();
            } else if ($('#2').css('display') != 'none') {
                $('#1').show().siblings('div').hide();
            }
        });
    </script>
 <div class="row">
            <div class="col-md-3">
                <div class="jumbotron">
                    <h4>Search courses</h4>
                    <hr>
                    <br>
                    <ul>
                        {% for faculty in faculties %}
                            <li id="btnClick">{{ faculty.name }}</li>
                            <ul>
                                {% for department in departments %}
                                    {% if department.faculty == faculty %}
                                        <li>{{ department.name }}</li>
                                        <ul>
                                            {% for study in studies %}
                                                {% if study.department == department %}
                                                    <li>{{ study.name }}</li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="col-md-9">
                <div class="jumbotron">
                    <div id="1">
                        <h3>All courses</h3>
                        <ul>
                            {% for course in courses %}
                                <li>
                                    <a id="first" href={{ course.slug }}>{{ course.name }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div id="2" style="display:none;">
                        <h3> {{ faculties.0 }} courses</h3>
                        <ul>
                            {% for course in courses %}
                                <li>
                                    <a id="first" href={{ course.slug }}>{{ course.name }}</a>
                                    <p>chinchin</p>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>

这就是现在的样子：https://i.imgur.com/fLq7MH2.png

Answer 1

好的，所以我认为您的部分问题是您想要第二个隐藏的 div，其中列出了学院特定的课程，但是您当前的 HTML 模板只会给您一个隐藏的 div，其中包含一个学院课程. 你需要每个教员有一个隐藏的 div。

NB：我不会使用隐藏的 div 这样做，我个人会使用 Bootstrap 的 tab/pill style。

无论如何，我认为下面应该给你你正在寻找的那种结果。显然我不能用你的模型来测试它。我已将模板更改为使用 related objects notation 而不是您的 if == 样式。

我也稍微改变了 jQuery。希望没问题，尽管它会产生#1 div 仅在单击任何链接之前可见的效果。

更新：我错过了 div id 中 faculty.name 周围的 {{ }}，我也没有将 jQuery 脚本包装在 $(document).ready() 中或包含 jQuery cdn。它现在应该可以按预期工作了。

更新 2：将元素的 id 更改为使用应为数字的 faculty.pk，并避免任何空格问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('.btnClick').on('click', function() {
        var faculty_id = $(this).attr('id');
        $('#'+faculty_id+'_tab').show().siblings('div').hide();
    })
})
</script>
 <div class="row">
    <div class="col-md-3">
        <div class="jumbotron">
            <h4>Search courses</h4>
            <hr>
            <br>
            <ul>
                {% for faculty in faculties %}
                    <li class="btnClick" id="fac_{{ faculty.pk }}">{{ faculty.name }}</li>
                    <ul>
                        {% for department in faculty.department_set.all %}
                            <li>{{ department.name }}</li>
                            <ul>
                                {% for study in department.study_set.all %}
                                    <li>{{ study.name }}</li>
                                {% endfor %}
                            </ul>
                        {% endfor %}
                    </ul>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="col-md-9">
        <div class="jumbotron">
            <div id="1">
                <h3>All courses</h3>
                <ul>
                    {% for course in courses %}
                        <li>
                            <a class="first" href={{ course.slug }}>{{ course.name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            {% for faculty in faculties %}
            <div id="fac_{{ faculty.pk }}_tab" style="display:none;">
                <h3> {{ faculty.name }} courses</h3>
                <ul>
                    {% for department in faculty.department_set.all %}
                    {% for study in department.study_set.all %}
                    {% for course in study.study_set.all %}
                        <li>
                            <a class="first" href={{ course.slug }}>{{ course.name }}</a>
                            <p>chinchin</p>
                        </li>
                    {% endfor %}
                    {% endfor %}
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </div>
</div>