Откройте в новой вкладке заданное изображение c

Question

Я должен сделать редактор изображений. До сих пор у меня есть: 2x HTML страницы, первая страница предназначена для загрузки изображений и предварительного просмотра изображений на слайдере, а вторая страница - это редакторы, которые содержат функции редактора изображений basi c; Стиль 2x CSS для каждой HTML страницы; 2x javascript для каждой HTML страницы.

Загрузить изображение, просмотреть изображение, нажать на изображение, открыть вторую HTML страницу (редактор), отредактировать фотографию, нажать кнопку сохранения (закрыть страницу редактора) и показать отредактированное изображение.

Моя проблема заключается в том, что, когда я нажимаю кнопку мыши на изображение, он открывает редактор с первым загруженным изображением. Если я загружу другое изображение, он все равно откроет редактор с первым изображением.

То, что я пробовал до сих пор, это:

1. Каждый раз, когда я загружаю изображение, я получаю img.src и храню его в localStorage. После этого на второй странице (редактор) просто создайте img с помощью sr c из localStorage. Это работает, но он откроет только последнее добавленное изображение.

2. Я пытался получить img.src каждый раз, когда нажимаю на изображение и сохраняю в localStorage. Это работает, но он откроет только первое добавленное изображение.

Что я хочу: Добавить изображение1, нажмите на изображение1, откройте в редакторе изображение1. Закройте редактор, добавьте изображение 2 и изображение 3, нажмите на изображение 3, откройте в редакторе изображение 3.

Вот код с тем, что я пробовал.

Вот когда я нажимаю на открытый редактор изображений. html

$(document).on("click", "img", function() {
    var imgSrc = $("img").attr("src");
    console.log(imgSrc);
    localStorage.setItem("imgSource", imgSrc);
    window.open("editor.html", "_blank");
  });

Вот в редакторе, создайте img и получите sr c из localStorage.

 var imgPreview = $("#image-preview");
  createImage()
  function createImage() {
    var editImage = $("<div></div>").addClass("edit-image");
    imgPreview.append(editImage);
    var imageSource = localStorage["imgSource"];
    var img = document.createElement("img");
    img.src = imageSource;
    editImage.append(img);
  }

Мне просто нужна идея / документация.

Извините за мой плохой Энгли sh:)

Answer 1

Проблема в том, что $("img").attr("src"); всегда будет возвращать src первого изображения (эта строка кода в основном означает «получить все изображения и дать мне sr c первого»).

Вы должны связать событие onclick с каждым изображением. Внутри обработчика событий this указывает на изображение, по которому щелкнули, поэтому $(this).attr("src") всегда даст вам право src:

$("img").on("click", function() {
    var imgSrc = $(this).attr("src");
    console.log(imgSrc);
    localStorage.setItem("imgSource", imgSrc);
    window.open("editor.html", "_blank");
});

Редактировать: Согласно вашему комментарий, обработчик события должен быть присоединен к элементу после его добавления в DOM, то есть что-то вроде:

function createImage() {
    //your code here, then...

    //here `img` is the variable img, i.e. the image you are adding
    $(img).on("click", function() {
        var imgSrc = $(this).attr("src");
        console.log(imgSrc);
        localStorage.setItem("imgSource", imgSrc);
        window.open("editor.html", "_blank");
    });
}