jQuery動態圖片庫彈出窗口顯示所有圖像

Question

我想創建動態模型彈出窗口，所以我在js代碼下面編寫了代碼。但是當我單擊單個圖像時，模型彈出窗口顯示了動態創建的div中的所有圖像內容。 我想要相同的圖像及其在模型彈出窗口中的內容。

 <script> $("#pop").on("click", function() { $('#imagepreview').attr('src', $('#imageresource').attr('src')); $('#imagemodal').modal('show'); }); </script> 

 <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" > <div class="row"> <div id="pop"> <a href="#" class="dialogpopup" style=" height: auto;width: 600px;display: -webkit-inline-box;"> <div ng-repeat="Spaces in SpaceList" style="height:auto!important;display: table-caption;"> <span>{{Spaces.Name}}</span> <img id="imageresource" src="{{Spaces.Image}}" style="width:200px; height: 200px;"> <span>{{Spaces.MaxCapacity}}</span> </div> </a> </div> <!-- Modal --> <div class="modal fade" id="imagemodal" tabindex="-1" 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"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">{{Spaces.Name}}</h4> </div> <div class="modal-body addright" id="modelimg1" ng-repeat="Spaces in SpaceList"> <img src="{{Spaces.Image}}" id="imagepreview" style="width:400px; height: 270px;"> <p class="parapadding"> Name:{{Spaces.Name}}<br /> Description:{{Spaces.Description}}<br /> Size:{{Spaces.Size}}<br /> Capacity:{{Spaces.MaxCapacity}}<br /> Configuration:<br /> </p> </div> </div> </div> </div> </div> </div> 

Answer 1

任何標簽的ID參數都應該是唯一的 。 在中繼器中，您具有相同的ID。 將其更改為id="{{'imagepreview' + $index}}"和ng-repeat="Spaces in SpaceList track by $index"