Блог

Мне нужна помощь для добавления или изменения изображения div с помощью нажатого изображения из модального.

Я могу получить щелкающее изображение src из модального, и изображение может быть добавлено следующим образом:

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

Но как я могу узнать, в какую область мне нужно добавить? Если я использую $(this).html("<img src='" src "'>"); это для модального тела и не будет работать для списка оболочек. Если я использую $(".list .item #image").html("<img src='" src "'>"); это, это снова не сработает из-за того же идентификатора изображения. Итак, как я могу узнать, из какой области 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, модальное открытие и список изображений там. Если я нажал на 100×50.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 /

Вы можете пометить элемент, на который вы нажали, классом (обратите внимание, что я использую класс изображения вместо идентификатора, согласно моему предыдущему комментарию, поэтому вам придется изменить свой DOM / другой код, чтобы вместо использования #image id вы использовали .image class):

 $(".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');
});