Question

我需要帮助，以从模态中单击图像来添加或更改div图像。

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

import { Dimensions, StyleSheet } from 'react-native'

const { width } = Dimensions.get('window')

const styles = StyleSheet.create({
divider: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
  },
  hrLine: {
    width: width / 3.5,
    backgroundColor: 'white',
    height: 1,
  },
  dividerText: {
    color: 'white',
    textAlign: 'center',
    width: width / 8,
  },
})

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

例如：

$(".list .item #image").html("<img src='"+src+"'>");

如果我单击到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">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>

我的JS代码：

<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>

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

Answer 1

您可以使用一个类来标记您单击的项目（请注意，根据我之前的评论，我使用的是 image 类，而不是ID，因此您必须更改DOM / other代码，因此您可以使用 .image 类而不使用 #image id）：

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

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

1 个答案: