模态是从以前的模态“记住”代码

Question

设置
我有一个框格（模态触发器）。每个框打开一个模式。每个模式内部都有一个非常简单的缩略图库，其中包含一个主图像和缩略图。单击缩略图会将主图像替换为自身的较大版本。

问题（此序列中的第 4 步...）
(1) 打开模态A，主图显示——太好了！
(2) 单击模态 A 中的第二个拇指，主图像将变为该拇指的更大版本 - 太棒了！
(3) 关闭模态 A - 太棒了！
(4) 打开模态 B，主图像不是模态 B 的第一个缩略图，但它是模态 B 的第二个缩略图的较大图像 - 不是很好！模态 B 记得我从模态 A 中选择了第二个拇指，因此它显示的是模态 B 的第二个拇指而不是第一个。

问题
我如何（以及在​​哪里）添加代码以使模态“忘记”在最后一个模态中选择的内容？还是每次打开模态时都会重置？如果我选择模态 A 的第三张图像，但打开模态 B 并且没有第三张缩略图，这个问题会很严重 - 因为主图像将是空白的。我是否将代码应用于模态或图库 jquery？这让我发疯了！

---

模式插件
custombox.js

缩略图插件
simplegallery.js

JQUERY 到 FIRE 模式

$(document).ready(function () {
    $(".modal img").not(":visible").each(function () {
        $(this).data("src", this.src);
        this.src = "";
    });
    $(".modal").each(function () {
        $(this).data("sourcesAreSet", false);
    });
    $('.info').on('click', function (e) {
        var correspondingModal = $($(this).data('href'));
        if (correspondingModal.data("sourcesAreSet") == false) {
            correspondingModal.find("img").each(function () {
                this.src = $(this).data("src");
            });
            correspondingModal.data("sourcesAreSet", true);
        }
        Custombox.open({
            target: $(this).data('href'),
            effect: 'push',
            speed: 500,
            overlayColor: '#2C3E50',
            overlayClose: false
        });
        e.preventDefault();
    });
});

JQUERY 到 FIRE GALLERY

$(document).ready(function(){
    $('#gallery').simplegallery({
        galltime : 1000, // transition delay
        gallcontent: '.content',
        gallthumbnail: '.thumbnail',
        gallthumb: '.thumb',
    });
});

示例模式

<div id="modal51" class="modal">
    <div id="portfolioItemClose" class="close"><span></span>
    </div>
    <div class="portfolioTitle wow fadeInLeft" data-wow-delay=".5s" data-wow-duration=".3s">ikuw solutions
    </div>
    <div class="portfolioImageBodyContainer">
        <div class="portfolioImage wow rotateIn" data-wow-delay=".3s" data-wow-duration=".3s">
            <div id="gallery" class="">
                <div class="content">
                    <img src="../../../../../assets/images/portfolio/brochures-flyers/20141117_ikuw_flyer_course-outline_tech.jpg" class="image_1">
                    <img src="../../../../../assets/images/portfolio/brochures-flyers/20141117_ikuw_flyer_course-outline_tech_2.jpg" class="image_2" style="display:none;">
                </div>
            </div>
        </div>
        <div class="portfolioBody wow fadeInDown" data-wow-delay=".5s" data-wow-duration=".3s">
            <div class="portfolioClientDescriptionUsage">
                <div class="portfolioBodyClient wow fadeIn" data-wow-delay=".8s">ikuw solutions</div>
                <div class="portfolioBodyDescription wow fadeIn" data-wow-delay=".9s">technical training course outline</div>
                <div class="portfolioBodyUsage wow fadeIn" data-wow-delay="1s">students</div>
            </div>
            <div class="portfolioBodyText wow fadeIn" data-wow-delay="1.1s">[text]</div>
            <div class="portfolioBodyPDF wow fadeIn" data-wow-delay="1.1s"><a href="../../../../../assets/images/portfolio/brochures-flyers/20141117_ikuw_flyer_course-outline_tech.pdf" target="_blank">View full-scale PDF&nbsp;&nbsp;<span class="fa fa-angle-right"></span></a></div>
            <div class="portfolioBodyLine wow zoomIn" data-wow-delay="1.2s" data-wow-duration=".3s"></div>
            <div class="portfolioBodyVersions wow fadeIn" data-wow-delay="1.3s">pages</div>
            <div class="thumbnail">
                <div class="thumb wow bounceIn" data-wow-delay="1.5s"><a href="#" rel="1"><img src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20141117_ikuw_flyer_course-outline_tech.jpg" id="thumb_1" class="fit"></a></div>
                <div class="thumb wow bounceIn" data-wow-delay="1.6s"><a href="#" rel="2"><img src="../../../../../assets/images/portfolio/brochures-flyers/thumb_20141117_ikuw_flyer_course-outline_tech_2.jpg" id="thumb_2" class="fit"></a></div>
            </div>
        </div>
    </div>
</div>

编辑
小提琴！小提琴！小提琴！ --> http://jsfiddle.net/zuhloobie/nLhcejsz/

(1) 点击模态A，在右侧看到模态主图A1和拇指A1和A2
(2) 点击拇指A2，看到主图变为A2
(3) 关闭模态A，打开模态B
(4) 看到主图像是 B2，而不是 B1（它记得在模态 A 中单击了第二个拇指，因此它显示了模态 B 的第二个拇指）

希望对您有所帮助！ :)

Answer 1

问题是您只设置了新的src 值，但图像元素本身（在单击缩略图后隐藏/显示）仍处于与之前模式相同的状态。

我通过在模态打开时触发第一个拇指的点击来使其工作：

open: function() {
    correspondingModal.find("#thumb_1").parent("a").trigger("click");
}

Updated Fiddle

Answer 2

我更改了初始 .ready() 函数的顺序，并尝试保存所有模式的内容并在 Custombox 关闭时重新加载它们。

编辑：已通过在 Custombox 的 open() 和 close() 函数上加载内容来解决未加载的图像。

获取初始模态内容：

$(".modal").each(function () {
    window['reset' + $(this).attr('id')] = $(this).find('.content').html();
});

在 Custombox open() 处加载模态：

open: function(){
            $(".modal").each(function () {
                $(this).find('.content').html(window['reset' + $(this).attr('id')]);
            });
        }

在 Custombox close() 处重新加载模式：

close: function(){
            $(".modal").each(function () {
                $(this).find('.content').html(window['reset' + $(this).attr('id')]);
            });
        }

更新的小提琴：http://jsfiddle.net/nLhcejsz/6/

现在应该按照您的要求运行，模式会忘记单击了哪个缩略图并相应地重置。

Answer 3

可能是一个hackjob。但是试一试。在.info函数的click中加入这段代码：

$(".content img").hide(0, function () {
    $(".image_1").show();
});

这有效地“重置”了图像：

小提琴：http://jsfiddle.net/praveenscience/nLhcejsz/2/

Answer 4

我在使用引导模式时遇到了同样的问题。我为自己找到了一个简单且有效的解决方法：

$('.info').on('click', function (e) {
    $(".modal-body").empty(); 
    // Don't know which element should be empty in your example
    // After the empty(), I load the content I need
}

对我来说一个简单的.empty() 之前我加载内容完成了这项工作。

Answer 5

我有一个简单的：

let preventNoMultiple = true;
$('.modal').modal();
$('.Modal').on('shown.bs.modal', function (event) {
  if(preventNoMultiple){// ...do something}
});
$('.Modal').on('hidden.bs.modal', function (event) {preventNoMultiple = false;}