Question

我正在尝试创建一个虚拟股票市场，我有不同的模态显示每个股票的信息。但模板呈现为我无法为每个股票获得唯一的模态标题。

即使点击'CIPLA'股票后，我也会买“买HDFC”作为模态标题。这是我的django模板。

    {% for stock in user.stocks.all %}
    <li class="list-group-item">
        <b>{{ stock.stock_name  }}</b>
        <p id="curr">Current price : {{ stock.current_price }}</p>
        Bought at : {{ stock.buy_price }}
        <button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>
        <!--Modal for buy-->
        <div id="buy-modal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Buy {{ stock.stock_name }}</h4>
                  </div>
                  <div class="modal-body">
                      <form method="post" action="/stocks/{{ user.id }}/{{ stock.stock_name }}/buy/" >
                          {% csrf_token %}
                        <label for="quantity">Quantity</label>
                        <input type="number" id="quantity-buy" name="quantity">
                        <button class="btn" id="confirm-buy" type="submit" >Buy</button>
                      </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>

            </div>
        </div>

我以{% endfor %}结束了它。

Answer 1

错误是由这一行引起的：

<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>

如您所见，此行已映射到data-target="#buy-modal"。这意味着带有id="buy-modal"的Dom元素会被它调用。

现在，如果您查看代码，您将创建多个模态（但具有相同的html id ）。

根错误是具有相同ID的多个Dom元素。如果你看这一行：

<div id="buy-modal" class="modal fade" role="dialog">

此行在您的Dom内部创建n次（因为它在循环内运行）。这意味着存在具有相同ID的n模态。这也意味着你拥有n个具有相同id 的模态。

现在编写html是一种错误的做法。

每次点击按钮：

<button class="btn" id="buy" data-toggle="modal" data-target="#buy-modal">Buy</button>

html解析器在你的html中查找相应的data-target。显然 n （因为您创建了n;超过1）。现在，html每次都会调用第一个或任何特定的模态，因为它在初始化模态时只解析了一个。 因此，每次单击按钮时，都会弹出相同的模式

所以要解决这个问题，你必须使用不同的ID和不同的按钮触发器来创建模态。

希望这会有所帮助。谢谢。

如何为每个股票获得一个独特的模态标题？

1 个答案: