Javascript 在模式中单击打开图像

现在，我知道这已经被问了很多次了，但是我发现的每一个例子，我都试过了，但都不起作用

我有一个显示在网页上的imageURL列表。我希望能够单击该图像，然后打开一个模式并显示放大的图像

到目前为止，我所了解的资料来源如下：

但无论我尝试了什么，它都不起作用，当单击图像时，它只会通过

href=“#”

将我引导回主页

我使用的代码如下（这是一个angular应用程序）

• 在产品的图像上循环并将url嵌入

  src

  标记：

    <a *ngFor ="let image of product.productImageList" href="#" id="pop">
     <img id="imageresource" src="{{image.imageUrl}}" style="width: 10%; height: 10%; margin-left: 10%;">
   </a>
  

  <script>
  $("#pop").on("click", function() {
   $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
   $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
  });
  </script>
  

然后为模式创建HTML：

<!-- Creates the bootstrap modal where the image will appear -->
<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">Image preview</h4>
  </div>
  <div class="modal-body">
    <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
  </div>
</div>

&时代；接近
图像预览
接近

最后是javascript（目前它通过

标记嵌入到html中：

  <a *ngFor ="let image of product.productImageList" href="#" id="pop">
   <img id="imageresource" src="{{image.imageUrl}}" style="width: 10%; height: 10%; margin-left: 10%;">
 </a>

<script>
$("#pop").on("click", function() {
 $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
 $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});
</script>

$（“#pop”）。在（“单击”，函数（）上）{
$（'#imagepreview'）.attr（'src'，$（'#imageresource'）.attr（'src'））；//在这里，当用户单击放大链接时，将图像指定给模式
$（'#imagemodal'）.modal（'show'）；//imagemodal是分配给引导模式的id属性，然后我使用show函数
});

---

我不知道为什么这不起作用。如果有任何线索，我将不胜感激！！

在超链接（）中使用pop类而不是id

$（“.pop”）。在（“单击”，函数（）{
$（'#imagepreview'）.attr（'src'，$（this.find（'img'）.attr（'src'））；
$（'#imagemodal'）.modal（'show'）；
});

不起作用，而且我在html中使用id时为什么要使用该类？当页面上有一个唯一的元素，但我们有多个锚定标记和多个图像时，会使用id，好的，那么我需要更改为：仍然只需将我指向#如果不使用锚定标记进行导航，您可以删除href属性。Alternati另外，您可以将事件对象传递到click处理程序中，并调用event.preventDefault（）。