使用jQuery

Question

我正在尝试为自己建立一个非常简单的网站-我将有很多专辑包含家庭室内照片。我想为每个专辑实现图库。我无法解决的问题是单击鼠标时获得正确的图像。当我执行console.log时，我可以看到选择了正确的图像，但是它从未出现过。也许有人可以在这里帮助我？ 这是我的代码：

 Album show page:



<h4 class="text-center" id= "album-title">
 <%= @album.title %>
</h4>
<div class="text-center album-body">
 <%= @album.body %>
</div>


<!-- app/views/posts/show.html.erb -->
 <% if @album.images.attached? %>
<div class="card-columns">
    <% @album.images.each do |image| %>
        <%= image_tag image.variant(resize: "250x250"), class: "card album-image gallery-item" %>
        <%= link_to "Remove", delete_image_attachment_album_url(image), method: :delete, data: {confirm: "Are you sure?"} if current_admin %>
<% end %>
<% end %>
</div>  

<div class = "lightbox">
 <div class = "lightbox-content">
    <div class = "lightbox-controls">
        <a href="#" class="lightbox-close">Close</a>
        <a href="#" class="lightbox-prev"> < </a>
        <a href="#" class="lightbox-next"> > </a>
    </div>
 <div class = "lightbox-image"></div>
   </div>
  </div>

这是我到目前为止编写的我的jquery代码。

 $(document).on('turbolinks:load', function() {
    $(".lightbox").hide();
});

$(document).on('turbolinks:load', function() {
$(".lightbox-close").click(function(event){
    event.preventDefault();
$(".lightbox").hide();
 });
});

for(i = 0; i < $(".gallery-item").length; i++) { 
let item = $(".gallery-item")[i];
item.onclick = function(event) {
$(".lightbox").show();
let elementClickedOn = event.target;
console.log(elementClickedOn)
 }
}

我需要写些什么才能使elementClickedOn出现在灯箱中？