如何获得每个股票的独特模式的头?
问题描述:
我想创建一个虚拟的股市,我有不同的模态显示有关每只股票的信息。 但模板呈现为这样的,我无法得到每只股票的唯一模式头。 如何获得每个股票的独特模式的头?
即使点击'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">×</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 %}
结束了它。
答
错误正在引起这一行:
<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和不同的按钮触发创建模式。
希望这会有所帮助。谢谢。
对不起,太迟不能接受这个答案。我花了很长时间才明白你想说什么。 –