Question

我正在尝试让这个脚本处理页面上的多个图像，我需要做些什么才能将其更改为“mapImg”和“img01”。我假设那些是需要修改的脚本区域......但这是我使用的第一个js ...

您可以看到示例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，他们的等等）脚本也设置为一个图像变量img01，我想在页面上影响4或5个图像（img01，img02，img03等），具有相同的模态样式和动作。因此，而不是复制脚本4或5次并更改变量，（我不确定你是否可以在一个页面上执行此操作？），我希望将此特定脚本应用于多个变量集那一刻似乎只有一个硬连线？我知道这些可能看起来像是婴儿步问题...但我担心这就是我现在使用Javascript的地方所以如果你回应记得我只会说你说的语言中的几句话......下一步季度我会更好地理解这些东西....感谢您的帮助

Answer 1

使用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 个答案: