我正在 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();}
});
注意使用.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 -->
引用文献:
关于javascript - getElementById 具有动态创建的现有 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26790450/