如何获得每个股票的独特模式的头？

Question

我想创建一个虚拟的股市，我有不同的模态显示有关每只股票的信息。 但模板呈现为这样的，我无法得到每只股票的唯一模式头。

即使点击'CIPLA'股票，我也会得到“Buy 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）。

是所述多个DOM元素具有相同id的根错误。如果你看一下这一行：

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

这行是在Dom内部创建n次（因为它在循环中运行）。这意味着有n个模式具有相同的ID。这也意味着，你DOM有模态具有相同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和不同的按钮触发创建模式。

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