Javascript-getElementById，它具有动态创建的现有ID

我正在ExpressionEngine中构建一个页面，每次用户添加一个新图像时，img元素的ID都会增加一个（给每个图像一个唯一的ID）。例如，如果管理员上传3个图像，每个图像的ID分别是mainImg0、mainImg1、mainImg2。用户可以根据需要添加任意多的图片

我使用下面的javascript/jquery允许前端用户使用输入按钮打印这些图像，但现在代码只打印第一个图像。在js中，抓取每个唯一id的最佳方法是什么，这样当用户单击“打印”时，相应的图像将在新选项卡中打开并打印

以下是我当前的js：

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

以下是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" 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>

单击以缩放图像

单击以缩放图像

单击以缩放图像

您可以简单地遍历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();}
});

参考资料：

---

您不需要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。

如果它们共享一个类，或者一起在一个容器中，您可以使用所述类/父容器作为选择器，循环通过

img

标记，并将ID完全排除在外。我理解正确吗？这很好。谢谢你的参考链接。

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