getElementById 具有动态创建的现有 id答案

【问题标题】：getElementById that have existing ids which are created dynamicallygetElementById 具有动态创建的现有 id
【发布时间】：2015-01-03 14:35:03
【问题描述】：

我正在 ExpressionEngine 中构建一个页面，每次用户添加新图像时，img 元素的 ID 都会增加 1（为每个图像提供唯一的 ID）。因此，例如，如果管理员上传 3 个图像 id，每个图像 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>

【问题讨论】：

如果他们共享一个类，或者一起在一个容器中，您可以使用该类/父容器作为选择器，并循环遍历img 标签，并将 ID 完全排除在外。我理解正确吗？

标签： javascript image printing expressionengine

【解决方案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，而不是#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 -->

参考资料：

【讨论】：

这工作得很好。并感谢您提供参考链接。

【解决方案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。

【讨论】：