JS объектно-ориентированное программирование - PullRequest
Новая
       10

JS объектно-ориентированное программирование

0 голосов
/ 30 сентября 2018

Я новичок в объектно-ориентированном программировании, я хочу создать простой лайтбокс, который показывает фотографию после нажатия на изображение.Я не знаю, как получить "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();
...