在通过交换源的脚本后，单击按钮时需要 JavaScript 将图像源重置为原始

Question

我目前正在我的 html 文档中成功运行 JavaScript，这使我可以在悬停在各种缩略图上时交换 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/', ''));
});

然后当你想改回来的时候，用$mainImg.data('originalSrc')替换src