Question

我是js的初学者，无法解决此问题... 我正在使用引导程序，并在jquery中获得了脚本。

这是我的两个页面，我正在使用Django模板：

{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <link href="{% static "aventures\aventures.css" %}" type="text/css" rel="stylesheet">
    
    <title>{% block title %}{{aventure.titre}}: {{chapitre.titre}}{% endblock %}</title>
    {% block head %}{% endblock %}

</head>

<body>

    <header>
        <div class="collapse bg-primary" id="navbarHeader">
        <div class="container">
            <div class="row">
            <div class="col-sm-8 col-md-7 py-4">
                <h4 class="text-white">About</h4>
                <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
            </div>
            <div class="col-sm-4 offset-md-1 py-4">
                <a class="btn btn-warning" href="{% url 'accueil' %}">Quitter et revenir à l'accueil</a>
            </div>
            </div>
        </div>
        </div>
        <div class="navbar navbar-dark float-right">
        <div class="container-fluid d-flex">
            <button class="navbar-toggler bg-primary" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        </div>
    </header>
{% block jumbotron %}
    <!-- JUMBOTRON -->
    <div class="jumbotron text-center">
        <h1 class="display-4">{{chapitre.titre}}</h1>
        <p class="lead">{{chapitre.resume}}</p>
    </div>
{% endblock %}

{% block main %}
{% endblock %}
<!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="{% static 'jquery-3.5.1.min.js' %}"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

{% block script %}
{% endblock %}
</body>
</html>

并在主块中：

{% extends "base_aventures.html" %}
{% load my_filter %}
{% load static %}
{% block main %}
<!--pour passer la variable a javascript-->
<input id=longueur_templates class="hidden" value={{templates|length}}>

<!--Caroussel-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">

{% if len_templates > 1 %}
    <div class="btn-group" role="group" aria-label="Basic example">
        {% for template in templates %}
            <button type="button" class="btn btn-warning chapitre d-block" href="#carouselExampleIndicators" data-slide-to="{{ forloop.counter0 }}">{{template.nom}}</button>
        {% endfor %}
    </div>
{% endif %}

    <div class="carousel-inner">
{% for template in templates %}

    {% if template.nom == 'Journal' %}    {% include './journal.html' %}    {% endif %}

    {% if template.nom == 'Énigme' %}
    <div class="carousel-item">    
        <p>Coucou Énigme</p>
    </div>    
    {% endif %}


    {% if template.nom == 'Choix' %}    {% include './choix.html' %}    {% endif %}


    {% if template.nom == 'Actions' %}    {% include './actions.html' %}    {% endif %}
    
    {% if template.nom == 'Question' %}
    <div class="carousel-item">
        <p>Coucou Question</p>
    </div>
    {% endif %}
    

{% endfor %}
    </div>      
</div>   


{% endblock %}

{% block script %}

<script type="text/javascript" src="{% static 'aventures/js/chapitre.js' %}"></script>

{% endblock %}

所以我的脚本在链接之后。问题是，如果我不加载jquery，我的脚本将不起作用（获取：Uncaught TypeError：$ .ajaxSetup不是一个函数），并且如果我不加载bootstrap.js，那是因为我的bootstraps折叠不起作用... 如果我像示例一样加载两者，则取决于顺序。

有人可以解释我在做什么吗？

非常感谢！

编辑：谢谢您的帮助，我尝试了两次，但还是没有结果：

我不确定我是否正确使用了无冲突，但没有用。
如果我删除.slim引导程序无法正常工作...

冲突的jQuery和引导程序

0 个答案: