如何使用模态中的单击图像添加或更改div图像

Question

我需要帮助来添加或更改div图像与来自模态的点击图像。

我可以从模态中获得点击的图像src，图像可以像这样添加：

.html("<img src='"+src+"'>");

但我怎么知道我需要添加到哪个区域？如果我使用$(this).html("<img src='"+src+"'>");这是模态体，不适用于包装列表。如果我使用$(".list .item #image").html("<img src='"+src+"'>");，这将无法再次使用相同图像ID的原因。那我怎么知道从哪个div区域打开模态？

例如：

<div class="wrapper">
<div class="list">
<div class="item"><div id="image">A</div></div>
<div class="item"><div id="image">B</div></div>
<div class="item"><div id="image"><a href="test.html"><img src="https://via.placeholder.com/100x75.png"></a></div></div>
</div>
</div>

如果我点击B区，模态打开和图像列表那里。如果我点击100x50.png，我该怎样做B区这样：

<div class="wrapper">
<div class="list">
<div class="item"><div id="image">A</div></div>
<div class="item"><div id="image"><img src="https://via.placeholder.com/100x50.png"></div></div>
<div class="item"><div id="image"><a href="test.html"><img src="https://via.placeholder.com/100x75.png"></a></div></div>
</div>
</div>

我的JS代码：

$(".modal-body").on("click", "img", function() {
var src = $(this).attr('src');   
alert("src: "+src);
//$(this).html("<img src='"+src+"'>");
//$(".list .item #image").html("<img src='"+src+"'>");
});

我的jsfiddle示例代码在这里:(所有代码）https://jsfiddle.net/ve86u907/

Answer 1

您可以使用类标记您单击的项目（请注意我使用的是图像类而不是id，根据我之前的注释，因此您必须更改DOM /其他代码，以便不使用#image id你使用.image类）：

$(".list .image").click(function(e) {
    $(this).addClass('source-modal');
    $('#modal-title').html("TEST");
    modal.style.display = "block";
});

这样你就可以在点击模态图像时设置它的html：

$(".modal-body").on("click", "img", function() {
    var src = $(this).attr('src');   

    $('.list .image.source-modal').html("<img src='"+src+"'>").removeClass('source-modal');
});