Question

所以我在这里有这些代码用于图片，它与第一个完美配合，但它不会更新下一个模式。

 <a id="modal-456343" href="#modal-container-456343" role="button" class="btn" data-toggle="modal"><img src="~/Images/@(item.Id).jpg" style="height:100px; width:100px;" /></a>
                    <div class="modal fade" id="modal-container-456343" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        ×
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        @Html.DisplayFor(modelItem => item.Overskrift)
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <div>
                                        <img id="i" src="~/Images/@(item.Id).jpg" style="width:100%; height:100%">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

我希望它能够在点击新图片时更新或创建新模态。你们有什么建议吗？

提前致谢。

Answer 1

问题是你有重复的id所以它只适用于第一个，你的html是无效的，因为每个元素应该有唯一的id，只需给出唯一的id以使其正常工作，如：

<a id="@("modal-"+item.Id)" href="@("#modal-container-"+item.Id)" role="button" 
   class="btn" data-toggle="modal">
    <img src="~/Images/@(item.Id).jpg" style="height:100px; width:100px;" />
</a>
<div class="modal fade" id="@("modal-container-"+item.Id)" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">

或者这样：

<a id="modal-@(item.Id)" href="#modal-container-@(item.Id)" role="button" 
   class="btn" data-toggle="modal">
    <img src="~/Images/@(item.Id).jpg" style="height:100px; width:100px;" />
</a>
<div class="modal fade" id="modal-container-@item.Id)" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">

Mvc 4，Modal窗口foreach图片

1 个答案: