Требуется JavaScript для сброса источника изображений обратно к оригиналу при нажатии кнопки, после прохождения скрипта, который поменял источник

Question

В настоящее время я успешно запускаю JavaScript в своем html-документе, что позволяет мне менять main-img при наведении курсора на различные эскизы.Я успешно работал в различных модальных окнах с различным выбором изображений в каждом модальном окне.

Моя проблема в том, что после того, как я наведу курсор мыши на изображение и «main-img» изменится на соответствующий эскиз, когда я затем закрою это окно и открою другое модальное окно, «main-img» осталсячто из предыдущего свопа в предыдущем модальном окне.

это javascript, используемый для 'обмена изображениями':

$(document).ready(function() {
  // Image swap on hover
  $("div#gallery li img").hover(function() {
    $('img#main-img').attr('src', $(this).attr('src').replace('thumb/', ''));
  });
  // Image preload
  var imgSwap = [];
  $("div#gallery li img").each(function() {
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);
  });
  $(imgSwap).preload();
});
$.fn.preload = function() {
  this.each(function() {
    $('<img/>')[0].src = this;
  });
}

Я попытался исправить проблему, создав дополнительный скрипт, который перезагружает или сбрасывает исходный код 'main-img' обратнок оригиналу для каждого модала по нажатию кнопки, которая открывает соответствующие модалы.Однако я только недавно начал изучать jquery и java-script, поэтому мне не пришлось разбираться со сложностями кода, поэтому есть некоторые очевидные ошибки или более эффективные способы решения этой проблемы.

$(document).ready(function() {
  // script reset and reload
  $("button.md-trigger").click(
    function(){
      $('img#main-img').attr('src','2.jpg');
  });
});  

Если вынужна дополнительная информация, пожалуйста, дайте мне знать.

обновленный код все еще не работает:

        $(document).ready(function() {
        var $mainImg = $('img#main-img');

            $mainImg.data('originalSrc', $mainImg.attr('src'));
            $("div#gallery li img").hover(function(){
            $mainImg.attr('src',$(this).attr('src').replace('thumb/', ''));
        }); 
         $("button.md-trigger").click(
            function(){
                $mainImg.attr('src', $mainImg.data('originalSrc'));
        });
        }

Answer 1

Сохраните его в элемент данных.

var $mainImg = $('img#main-img');

$mainImg.data('originalSrc', $mainImg.attr('src'));
$("div#gallery li img").hover(function(){
  $mainImg.attr('src',$(this).attr('src').replace('thumb/', ''));
});

Затем, если вы хотите изменить его обратно, замените src на $mainImg.data('originalSrc')