Question

我有这种等级的模型顺序：课程，学习计划，部门和院系。我在bootstrap中有2列。第一栏列出了所有院系，以及每个部门的具体部门和学习计划。第二列列出了所有课程。我希望当有人点击教师时，通过替换所有课程，在第二栏中显示该教师的特定课程，相同的部门或学习课程。现在，我尝试了一些东西，但我不知道如何实现这个结果。我不知道如何列出每个教职员的课程，你可以注意到，我把教师作为考试。

<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，列出了Faculty特定的课程，但是你当前的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>

正确使用django模板中的boostrap

1 个答案: