별도의 onclick 이벤트로 onclick 수정

Question

3 개의 클릭 가능한 이미지가 있습니다. 첫 번째 행에 하나의 이미지, 두 번째 행에 두 개의 이미지. 첫 번째 행의 이미지는 두 번째 행의 이미지가 마지막으로 클릭 된 것을 반영합니다. 두 번째 행의 이미지를 첫 번째 행의 이미지의 src를 수정할 수는 있지만 앵커 태그의 onclick 매개 변수를 수정하는 데 어려움이 있습니다. 첫 번째 이미지의 href를 변경할 수는 없으며 두 번째 행 이미지를 실제로 흉내 내야합니다.

https://jsfiddle.net/2hgzmnmb/

<a onclick="document.getElementById('image1').click();" id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a> 

<br><br> 

<a id="image1" onclick="document.getElementById('previewImage').src='http://i.imgur.com/UevhwuA.png';alert('1')"><img src="http://i.imgur.com/UevhwuA.png"></a> 

<a id="image2" onclick="document.getElementById('previewImage').src='http://i.imgur.com/121fy0E.png';alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a> 

내가 다음 추가 할 : 여기 내 코드는 그것의 jsfiddle로와 함께의 맨 아래 행의 첫 번째 이미지의 onclick을 매개 변수로 document.getElementById('previewLink').onclick='document.getElementById('image1').click();' 및 : document.getElementById('previewLink').onclick='document.getElementById('image2').click();' 에 맨 아래 줄에 두 번째 이미지가 표시되므로 첫 번째 행의 이미지는 두 번째 행에서 마지막으로 클릭 한 이미지처럼 보일뿐만 아니라 실제 클릭을 모방합니다. 지금 코드에서 분명히 분명히 두 번째 행의 첫 번째 이미지를 클릭 한 것처럼 보입니다. 마지막으로 클릭 한 이미지가 무엇이든 관계없이 해당 이미지의 onclick 속성을 수정할 때 구문이 올바르지 않기 때문에 생각합니다. 첫 번째 행의 이미지에 대한 앵커 태그

또한 변수를 사용하여이 작업을 시도했지만 매듭이 조금 얽혀 있습니다. 이 작업을 수행하는 방법에 대한 아이디어가 있습니까? 나는 아직 가까이 있지 않다.

감사합니다!

Answer 1

나는 인라인 핸들러를 제거하고 대신 addEventListener()을 사용하십시오 - 당신이 미리보기 이미지를 클릭 모방하려는 클릭 동작을 시뮬레이션 속성 onclick 인라인에 alert() 메시지를 남겨 두었다 데모 목적을 제외하고.

논리를 JS로 <script> 요소로 입력하면 코드를 읽기 쉬운 방식으로 포맷 할 수 있으므로 유지 관리가 훨씬 쉽습니다. 나는 그것을 쉽게하기 위해 귀하의 낮은 이미지에 클래스를 추가하는 것도

// the following JS should be in a script element at the end of the body 
 
// and/or wrapped in a window onload handler 
 

 
function imageClick(e) { 
 
    currentImage = e.currentTarget; 
 
    document.getElementById("previewImage").src = currentImage.querySelector("img").src; 
 
} 
 

 
var images = document.querySelectorAll(".image"); 
 
for (var i = 0; i < images.length; i++) { 
 
    images[i].addEventListener("click", imageClick); 
 
} 
 

 
var currentImage = images[0]; // default to first image 
 

 
document.getElementById('previewLink').addEventListener("click", function() { 
 
    currentImage.click(); 
 
});

<a id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a> 
 
<br><br>  
 
<a id="image1" class="image" onclick="alert('1')"><img src="http://i.imgur.com/UevhwuA.png"></a>  
 
<a id="image2" class="image" onclick="alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a>

참고 :

그런 다음 단순히 현재 선택된 이미지가 무엇인지 추적하기 위해 변수를 사용 그들을 클릭 처리기를 추가하는 루프에서 처리합니다. 이것은 선택 사항이며 .querySelectorAll("#image1,#image2") 대신 id로 선택할 수 있습니다.

Answer 2

번째 행의 각 앵커 태그 아래 줄을 추가

document.getElementById('previewLink').related_id=this.id 

<a onclick="if(document.getElementById(this.related_id)!=null){document.getElementById(this.related_id).click()};" id="previewLink"><img id="previewImage" src="http://i.imgur.com/UevhwuA.png"></a> 
 
     
 
    <br><br> 
 
     
 
    <a id="image1" onclick="this.related_id=this.id;document.getElementById('previewImage').src='http://i.imgur.com/UevhwuA.png';alert('1');document.getElementById('previewLink').related_id=this.id"><img src="http://i.imgur.com/UevhwuA.png"></a> 
 
     
 
    <a id="image2" onclick="this.related_id=this.id;document.getElementById('previewImage').src='http://i.imgur.com/121fy0E.png';document.getElementById('previewLink').related_id=this.id;alert('2')"><img src="http://i.imgur.com/121fy0E.png"></a>

Answer 3

바이올린 : https://jsfiddle.net/2hgzmnmb/1/

이 : document.getElementById('previewLink').onclick='document.getElementById('image1').click();' 는 같아야 document.getElementById('previewLink').onclick=this.onclick

onclick 속성은 실제로 JS 코드를 실행하기 때문에 거기에 문자열을 전달하면 문자열로 해석됩니다.

onclick='document.getElementById('image1').click();'은 "document.getElementById('image1').click();" 문자열과 동일하지만 아무 것도 수행하지 않습니다.