Javascript - dynmaically으로 생성 된 기존 ID가있는 getElementById

Question

ExpressionEngine에 페이지를 만들고 사용자가 새 이미지를 추가 할 때마다 img 요소의 ID가 하나씩 증가합니다 (각 이미지에 고유 한 ID가 부여됨). 예를 들어, admin이 mainImg0, mainImg1, mainImg2 인 각각에 대해 3 개의 이미지 ID를 업로드하는 경우를 예로들 수 있습니다. 사용자는 필요한만큼 사진을 추가 할 수 있습니다.

다음 javascript/jquery를 사용하여 프론트 엔드 사용자가 입력 버튼을 사용하여 이미지를 인쇄 할 수있게하지만, 지금 코드는 첫 번째 이미지 만 인쇄합니다. js에서 각 고유 ID를 가져 오는 가장 좋은 방법은 무엇입니까? 사용자가 인쇄물을 클릭하면 해당 이미지가 새 탭에서 열리고 인쇄됩니다.

<div class="machine_parts_left"> 
    <div class="machine_parts_left_img"> 
     <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainImg0" src="{image}" alt="{image_title} Diagram" /></a> 
     <p>Click To Zoom Image</p> 
     <input type="button" value="Print Image" id="printImg" /> 
    </div> 
</div> 

<div class="machine_parts_left"> 
    <div class="machine_parts_left_img"> 
     <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainImg1" src="{image}" alt="{image_title} Diagram" /></a> 
     <p>Click To Zoom Image</p> 
     <input type="button" value="Print Image" id="printImg" /> 
    </div> 
</div> 

<div class="machine_parts_left"> 
    <div class="machine_parts_left_img"> 
     <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainImg2" src="{image}" alt="{image_title} Diagram" /></a> 
     <p>Click To Zoom Image</p> 
     <input type="button" value="Print Image" id="printImg" /> 
    </div> 
</div> 

Answer 1

당신은 단순히 DOM 통과 수 :

$('.printImg').click(function(){ 
    // from the clicked element, find the closest ancestor <div>, 
    // search that element for <img> elements, use get() to return the DOM 
    // node (not the jQuery collection): 
    var img = $(this).closest('div').find('img').get(0), 
     pwin = window.open(img.src,"_blank"); 
    pwin.onload = function() {window.print();} 
}); 

주 .printImg의 사용을 대신,

$(document).ready(function(){ 
    $('#printImg').click(function(){ 
     pwin = window.open(document.getElementById("mainImg0").src,"_blank"); 
     pwin.onload = function() {window.print();} 
    }); 
}); 

여기에 HTML의 출력입니다 :

여기에 내 현재 JS의 #printImg; 질문에서 깨닫는 것처럼 id은 문서 내에서 고유해야합니다.

클래스 선택기 (.printImg)를 사용하는 것은 분명히 HTML의 개정이 필요합니다

<div class="machine_parts_left"> 
    <div class="machine_parts_left_img"> 
     <a class="fancybox-effects-c" href="{image}" title="{image_title}"><img id="mainImg0" src="{image}" alt="{image_title} Diagram" /></a> 
     <p>Click To Zoom Image</p> 
     <input type="button" value="Print Image" class="printImg" /> 
    </div> 
</div> 

<!-- other repeated elements removed for brevity --> 

참고 :

• closest().
• find().
• get().

Answer 2

jQuery가 필요하지 않으며 잘못된 창으로 인쇄되었습니다.

var buttons = document.querySelectorAll('.machine_parts_left_img input'); 

for (var i = buttons.length-1; i >= 0; i--) { 
    buttons[i].addEventListener('click', handleClick, false); 
} 

function handleClick (evnt) { 
    var img = evnt.srcElement.parentNode.querySelector('img'); 
    var pwin = window.open(img.src,"_blank"); 
    pwin.onload = function() {pwin.print()}; 
} 

이렇게하면 모든 버튼에 동작이 추가되고 이미지에 ID를 추가 할 필요가 없습니다.