Question

我正在尝试创建一个模态弹出框，这样当我点击一个图标时，会弹出一个不同的图像。我只能弹出相同的图标而不是不同的图像。我基本上是JS的初学者，所以我不确定一些代码是什么意思或为什么需要它。我正在尝试将“cameraicon.svg”替换为“canon.png”。

这是我到目前为止所做的：

    <img id="myImg" src="Images/cameraicon.svg" alt="This photo...." width="30" height="30">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <img src="Images/canon.png" id="canon">

  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
function changeImage(img) {
    document.getElementById("img").src = img.src.replace("myImg", "canon");
}
var img = document.getElementById('myImg');
var modalImg = document.getElementById("canon");
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";
}

Answer 1

好的，这将是一个彻底改写，所以它比我原来的答案更有意义。

您已经编写了HTML全部内容，现在您希望将其设置为动态，您可以使用javascript进行操作！您想在单击图像时弹出模式，这是非常可行的。我们将从你所说的＆＃34;伪代码开始，＆＃34;这就像代码一样，但它实际上并不起作用，因为它更像是一种逻辑解释。

//pseudocode starts here
//first, let's create a variable and assign it to the original image's element
someImage = get the image html element

//tell javascript what to do when that element is clicked
someImage.onclick = function() {
    //executes when the element is clicked
    //at this point you'll already have which element was clicked on
    someImage.src = "new source";
}

首先，我们获取图像的html元素。每个html元素都有一个onclick事件。将该事件分配给某个函数时，只要单击该元素，它就会执行该函数。所以，现在让我们自己写一个真正的程序吧！我将使用您上面使用的相同HTML。

// real code starts here
// this gets the html element with id="realImg", which already exists on the page
var firstImg = document.getElementById("realImg");

//now we'll build a function
var imgSwitchFunction = function() {
    // assuming this function gets called when firstImg is clicked,
    //  we will simply change the source property of firstImg
    //  notice that there is not actually a "secondImg" variable
    //  and there doesn't need to be one in the html!
    firstImg.src = "Images/canon.png";
}

// this assigns our function to the element's onclick event,
//  meaning that it will be called when the element is clicked
firstImg.onclick = imgSwitchFunction;

请注意，要获得您在问题中描述的功能，根本不需要很多行代码。编码的最佳方式是简单的方法！

如果这回答了你的问题，请接受以下答案：）

Answer 2

更改您的功能：

// Get the modal
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("canon");
var captionText = document.getElementById("caption");

// Get the image and insert it inside the modal - use its "alt" text as a caption
function changeImage() {
  img.src = modalImg.src;
}

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

休息一切都应该没问题。将所有变量移至顶部

单击更改模态图像

2 个答案: