html - 引导轮播按钮仅适用于第一项（来自 jinja 循环），其余项目不起作用

Question

面对一些奇怪的错误。对于引导轮播，prev/next 按钮仅适用于 item 中的第一项，不适用于以后的第二项。但是，在我单击轮播后，我可以使用左右箭头键导航轮播，但按钮仍然不起作用。以前有人遇到过这样的问题吗？

PS：了解必须在此处粘贴可行的代码，但我不知道该怎么做

items_modals.html

<div class="modal fade" id="Modal-MoreInfo-{{ item.name }}"
 tabindex="-1"
 aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="ModalLabel">
      {{ item.long_name }}
    </h5>
    <button type="button" class="close"
            data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
          {% for x in img  %}
            {% if x.item_id == item.id %}
                  <div class="carousel-item {% if '_1.jpg' in x.img_path %} active {% endif%}">
                  <img class="d-block w-100" src="../../{{ x.img_path }}" alt="">
                  </div>
            {% endif %}
          {% endfor %}
        
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <p style="text-align:left">Dimensions: {{item.dimension }}</p>
    <br>
    {{ item.description }}
    </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary"
            data-dismiss="modal">Close
    </button>
  </div>
  </div>
</div>

产品.html

{% extends 'layout.html' %}
{% block title%}
Products
{% endblock %}
{% block content %}
<table class="table table-hover">
<thead>
    <tr>
        <!-- Your Columns HERE -->
        <!--th scope="col">ID</th-->
        <th scope="col" style="text-align: left;">Name</th>
        <th scope="col">Price</th>
        <th scope="col">Options</th>
    </tr>
</thead>
<tbody>
    <!-- Your rows inside the table HERE: -->
    {% for item in items %}
    {% include 'includes/items_modals.html' %}
        <tr>
            <!-- td>{{ item.id }}</td -->
            <td style="text-align: left;">{{  item.long_name }}</td>
            <td>${{ item.price }}</td>
            <td>
                <button class="btn btn-primary" data-toggle="modal" data-target="#Modal-MoreInfo-{{ item.name }}">More Info</button>

            </td>
        </tr>
    {% endfor %}
</tbody>
</table>
{% endblock %}

路线.py

@app.route('/product')
def product():

items = Item.query.all()
img = Item_img.query.all()
return render_template('product.html',items = items, img= img)

标签： htmljinja2bootstrap-carousel