클릭시 모달 이미지 변경

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을 모두 작성 했으므로 이제 동적으로 만들고 싶습니다. 자바 스크립트로 할 수 있습니다! 이미지를 클릭 할 때 모달 팝업을 만들고 싶습니다. 매우 효과적입니다. 우리는 "의사 코드 (pseudocode)"라고 부르는 코드부터 시작하겠습니다.이 코드는 논리적 인 설명과 같기 때문에 실제로는 작동하지 않습니다.

//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; 

질문에 설명 된 기능을 사용하는 데 코드가 너무 많이 사용되지는 않습니다. 코드 작성의 가장 좋은 방법은 간단한 방법입니다!

// 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(); 
} 

나머지 모든 괜찮을 것 :

이 귀하의 질문에 응답하면, 동의하시기 바랍니다 귀하의 함수로 이렇게 답 : 같은

Answer 2

변경입니다. 모든 변수를 상단으로 이동