试图让JavaScript适用于多个图像？

我试图让这个脚本在一个页面上的多个图像上工作，我必须做些什么才能将其更改为适用于“mapImg”和“img01”以上的内容。我假设这些是需要修改脚本的区域...但这是我与之合作的第一个js ...试图让JavaScript适用于多个图像？

您可以看到一个示例here。我希望此页面上的其他图像在点击时具有与第一个图像相同的行为（假设它们都是不同的图像）。

的JavaScript：

// Get the modal 

    var modal = document.getElementById('myModal'); 

// Get the image and insert it inside the modal - use its "alt" text as a caption 

    var img = document.getElementById('myImg'); 
    var modalImg = document.getElementById("img01"); 
    var captionText = document.getElementById("caption"); 

    img.onclick = function() { 
     modal.style.display = "block"; 
     modalImg.src = this.src; 
     captionText.innerHTML = this.alt; 
    } 

// Get the <span> element that closes the modal 

    var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 

    span.onclick = function() { 
     modal.style.display = "none"; 
    }

HTML：

<!-- Trigger the Modal --> 
<img id="myImg" src="images/dt_sm.png" alt="Skateboarding in Portland Skidmore Old Town" > 

<!-- The Modal --> 
<div id="myModal" class="modal">` 

    <!-- The Close Button --> 
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span> 

    <!-- Modal Content (The Image) --> 
    <img class="modal-content" id="img01"> 

    <!-- Modal Caption (Image Text) --> 
    <div id="caption"></div> 

</div>

更多详细信息

您好，感谢您的答复。我可以看到上面我的问题的一部分被切断了，我使用的其中一个标签是不准确的。我必须强调，这是我在生活中尝试修改的第一个Javascript，尽管我非常欣赏jQuery的建议，但我想知道我正在使用的脚本，在我移动之前，处理这个问题的其他方式。它看起来像我这个脚本设置来处理只与一个图像CSS样式（myImg），我想要三个或四个（myImag，hisImag，theirImag等）脚本也设置为一个图像变量img01，我想在页面（img01，img02，img03等）上产生4或5张图像，具有相同的模式样式和动作。因此，我不想复制脚本4次或5次并更改变量，（我不确定是否可以在单个页面上做到这一点？），而是希望将此特定脚本应用于多个变量集它似乎只有一个硬连线？我知道这些可能看起来像婴儿一步问题...但是我担心这是我现在用Javascript使用的地方，所以如果你回应，记住我只会用你正在说的语言知道几句话......在接下来季度我会更理解这个东西....感谢您的帮助

来源

2016-11-22 dmengstrom

了'id'应该是** **独特您 – Weedoze

问题不是很清楚...你试图运行在多模态相同的JavaScript，或者在不同的情态动词稍微修改后的版本？ –

尝试使用'class'代替'id'作为图像 – pradeep1991singh

使用jQuery，您可以实现图像的切换。

<!DOCTYPE html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <script> 
     $(document).ready(function(){ 
      $("#close01").click(function(){ 
       $("#img01").toggle(); 
      }); 

      $("#close02").click(function(){ 
       $("#img02").toggle(); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <!-- Trigger the Modal --> 
    <div id="myModal" class="modal"> 
     <span id="close01" >&times;</span> 
     <img class="modal-content" id="img01" src="img01.png"> 
    </div> 

    <div id="myModal" class="modal"> 
     <span id="close02" >&times;</span> 
     <img class="modal-content" id="img02" src="img02.png"> 
    </div> 
</body> 
</html>

来源

2016-11-22 15:31:21 shivam

嗨，谢谢你的回复。我可以看到上面我的问题的一部分被切断了，我使用的其中一个标签是不准确的。我必须强调，这是我第一次试图修改我的生活中的Javascript，尽管我很欣赏jQuery的建议。我想了解我目前正在处理的脚本，然后开始处理其他解决问题的方法。 – dmengstrom

试图让JavaScript适用于多个图像？

回答

相关问题