javascript - 显示与动态创建的缩略图关联的正确图片

Question

我已经为此工作太久了。在我得到大量建议图像库脚本的答案之前，我想了解这对我自己来说是如何工作的。我已经使用 ajax 和 php 动态创建了一个缩略图库，唯一不太正确的是当单击缩略图时，全尺寸图像会显示在弹出框中。如果没有 jquery 禁用默认链接操作，相关图像就会显示在新选项卡中，所以我知道动态创建的代码是可以的。我已将代码设置为获取动态链接的 href 属性，我认为我遇到了问题，无论单击缩略图如何，我都只能显示一张图像

创建缩略图的代码

<script type="text/javascript">

$(document).ready(function() {//READY FUNC

$(".albumName").click(function(){//click
     var albumid = this.id;
     $('#imageFrame').empty();
     $.post("includes/viewgallery.php",{albumId:albumid},function(data)  {//json
        console.log(data);  
        data = jQuery.parseJSON(data);
           $.each(data, function(key, val) {//iterate each data

               var albumName = val.albumName;
               var photoId = val.photoId;
               var photoName = val.photoName;
               var photoUrl = val.photoUrl;
               var thumbId = val.thumbId;
               var thumbName = val.thumbName;
               var thumbnailUrl = val.thumbnailUrl;
               var href = "http://217.199.187.191/mandingaarts.co.uk";

               $('#imageFrame').append('<a id"'+photoId+'" class="lightBox" href="'+href+'' +photoUrl+ '"><img id"'+thumbId+'" class="thumbnail" src="'+href+'' +thumbnailUrl+ '"/></a>'); 

              })//iterate each data

         });//json

    });//click

});//READY FUNC
</script>

获取全尺寸图像并将其显示在弹出框中的代码

<script type="text/javascript">

$('#imageFrame').on('click', '.thumbnail', function(e)
{

    e.preventDefault()
    var a_href = $('.lightBox').prop('href');
    console.log(a_href)
    $('#lightboxImage').prop('src', a_href)
$("#faded").fadeToggle("scale");
});

$('#lightbox').on('click', '#closeLightbox', function() {
    $('#faded').fadeToggle("scale")
    $('#lightboxImage').prop('src', '#')
});

</script>

Answer 1

您正在将大量 anchor 附加到 #imageFrame div 中。每个 anchor 都有一个 lightBox 类。

然后单击时，您将检索具有 lightbox 类的所有元素的数组，并获取其中一个元素的 href 属性 - 可能是第一个元素。

由于 onlick 是图像，请尝试类似的操作

a_href = $(this).parent().prop('href');