javascript - 如何为所有模式制作一个脚本?
问题描述
在同一页面上,我有大约十几个图像,并且在每个图像上单击时您会打开一个模态。我为每个模态制作了一个脚本,如何为所有模态制作一个脚本?
<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myLele(this)" src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg" class="img-responsive"></div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span onclick="undici.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale"></div>
</div>
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myJessy(this)" src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg" class="img-responsive"></div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span onclick="dieci.style.display = 'none'" class="close">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
<script>
var undici = document.getElementById('lele');
var lele = document.getElementById("img11");
function myLele(el) {
var ImgSrc = el.src;
undici.style.display = "block";
lele.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == undici) {
undici.style.display = "none";
}
}
</script>
<script>
var dieci = document.getElementById('jessy');
var jessy = document.getElementById("img10");
function myJessy(el) {
var ImgSrc = el.src;
dieci.style.display = "block";
jessy.src = ImgSrc;
}
window.onclick = function (event) {
if (event.target == dieci) {
dieci.style.display = "none";
}
}
</script>
我尝试了不同的方法,但不是在同一页面上的多个模式上不起作用。我可以做一个 foreach () 循环吗?
解决方案
每个元素的 ID 应该是唯一的。将两个图像的 ID 从 分别更改为myImg
独特的myImg1
和myImg2
。
此外,您不需要编写自定义函数来切换模式。data-toggle="modal" data-target="#lele"
只需通过添加到模态 1 图像和模态 2 图像中来使用 Bootstrap 中的内置模态,data-toggle="modal" data-target="#jessy"
如下所示:
<img src="/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
<img src="/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
您还需要将data-dismiss
属性添加到关闭按钮,如下所示:
<span class="close" data-dismiss="modal">×</span>
检查并运行以下代码片段,以获得我上面描述的实际示例:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
</div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span class="close" data-dismiss="modal">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale">
</div>
</div>
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
</div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span class="close" data-dismiss="modal">×</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
</div>
推荐阅读
- vba - 如何在 MS Project 中执行查询/访问共享点列表?
- scala - org.apache.spark.sql.AnalysisException:无法解析:从嵌套 json 读取数据时
- .net - 如何在 Azure Pipelines 上打包 .net framework Web App
- angular - ''{}" 类型的参数不能分配给角度参数
- python - Plotly,Python:如何将图形边框/边距配置为 fig = make_subplots()
- flutter - 动态 S3 存储桶 URL 缓存 Flutter
- python - 如何将随机分类添加到数据框中?
- java - 检查二维数组Java中的行和列中是否存在数字
- javascript - 如何使用 PHP 动态创建价格范围
- mapping - 确定 Haswell 物理地址空间中的等级和通道位