试图使javascript应用于多个图像吗？

Question

I am trying to get this script to work on more than one image on a page what do I have to do to change it to have it apply to more than "mapImg" and "img01". 我试图使该脚本在页面上的多个图像上运行，我需要做些什么才能对其进行更改以使其适用于多个“ mapImg”和“ img01”。 I am assuming that those are the areas of the script that need to be modified ... But this is the first js that I have worked with ... 我假设这些是脚本中需要修改的区域...但这是我使用过的第一个js ...

You can see a sample here . 您可以在此处查看示例。 I want the other images on this page to have the same behavior of the first image when clicked (pretend that they are all different images). 我希望此页面上的其他图像在单击时具有与第一个图像相同的行为（假装它们都是不同的图像）。

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

More Details 更多细节

Hi, Thanks for your responses. 嗨，谢谢您的回复。 I can see that part of my question above was cut off and one of the labels I used was inaccurate. 我可以看到上面我的问题的一部分被删掉了，我使用的标签之一不准确。 I have to emphasize that this is the first Javascript that I have tried to modify in my life and though I appreciate the jQuery suggestion, I would like to get my knowledge of the script I am working with at the moment under my belt before I move on to other ways of dealing with the problem. 我必须强调，这是我一生中尝试修改的第一个Javascript，尽管我很欣赏jQuery的建议，但我还是想了解我目前正在使用的脚本，然后再搬家。其他处理问题的方式。 It looks to me like this script is set up to deal with only with one image css styling (myImg) and I want three or four (myImag, hisImag, theirImag etc) The script is also set for one image variable img01 and i want to effect 4 or 5 images on the page (img01, img02, img03 etc), with the same modal styling and actions. 在我看来，此脚本设置为仅处理一个图像css样式（myImg），而我想要三个或四个（myImag，hisImag，themImag等）。该脚本还为一个图像变量img01设置了，我想使用相同的模式样式和动作在页面上（img01，img02，img03等）效果4或5张图像。 So instead of copying the script 4 or 5 times and changing the variables, (and I am not sure if you can do that on a single page?), I want to have This particular script apply to more than one set of variables at the moment it seems hardwired for only one? 因此，我不想让脚本复制4或5次并更改变量（并且我不确定是否可以在单个页面上执行此操作？），而是希望该特定脚本适用于网站上的多个变量集。似乎似乎只有一个硬连线？ I know these probably seem like baby step questions ... But I am afraid that is where I am at with Javascript at the moment so if you respond remember that I only know a few sentences in the language you are speaking ... After next quarter I will understand this stuff much better .... Thanks for your help 我知道这些可能看起来像是婴儿步的问题……但是，恐怕这是我目前正在使用Javascript的问题，因此，如果您回答，请记住，我只知道您所讲语言中的一些句子……下一个一季度，我会更好地理解这些东西....谢谢您的帮助

Answer 1

Using jQuery you can achieve the toggling of images . 使用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>

试图使javascript应用于多个图像吗？

问题描述

1 个解决方案

解决方案1
0 2016-11-22 15:31:21

试图使javascript应用于多个图像吗？

问题描述

1 个解决方案

解决方案1 0 2016-11-22 15:31:21

解决方案1
0 2016-11-22 15:31:21