js面向对象编程

Question

我是面向对象编程的新手，我想创建一个简单的灯箱，在单击图像后显示照片。我不知道如何获取“ src”并将其附加到灯箱div中。有人可以帮我吗？

先谢谢您：）

这是我的HTML代码：

<div class="gallery__photo">
  <img class="gallery__img" src="assets/images/gallery/01.JPG">
</div>  
<div class="gallery__photo">
   <img class="gallery__img" src="assets/images/gallery/02.JPG">
</div>
<div class="light-box">
   <img class="light-box__photo">
</div>

在我的js代码中：

import $ from 'jquery';
class Lightbox {
  constructor() {
    this.galleryPhoto = $(".gallery__photo");
    this.galleryImg = $(".gallery__img");
    this.lightbox = $(".light-box");
    this.events();
  }

  events() {
    this.galleryPhoto.click(this.openLightbox.bind(this));

    this.galleryImg.click(this.showImage);

    this.lightbox.click(this.closeLightbox.bind(this));
  }

  openLightbox() {
    this.lightbox.addClass("light-box__is-visible");
    return false;
  }

  showImage() {
    var imageScr = this.galleryImg.getAttribute("src");
  }

  closeLightbox() {
    this.lightbox.removeClass("light-box__is-visible");
  }

}

export default Lightbox;

此行在我的代码中不起作用：

var imageScr = this.galleryImg.getAttribute("src");

我已经将灯箱导入了App.js文件，如下所示：

import Lightbox from './modules/Lightbox';
var lightbox = new Lightbox();