具有动态创建的现有ID的getElementById
getElementById that have existing ids which are created dynamically
我正在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 -->
参考文献:
closest()
find()
get()
您不需要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。
相关文章:
- document.getElementById并使用id名称
- 是否仍然需要document.getElementById('id')或$('#id'
- 使用getElementById设置动态ID的输入字段的样式
- 如何传递元素's ID作为使用getElementById的函数的参数
- 当存在多行时,行中特定项的getElementById/ID's
- Javascript:表单验证getElementById仅返回第一个id元素
- 为什么我们被教导将document.getElementById(“id”)分配给一个变量,然后将该变量与属性一起使用
- document.getElementById(id)并切换多个id
- 当元素ID包含美元符号时,Javascript中的getElementByid.当ID包含美元符号时,
- 通过getElementById获取id,然后设置值
- 更多相同的id´s在文档.getElementById(“”)中
- JavaScript文档.getElementById(“id”)和元素id属性
- 从自动生成的列表中选择时,将“img id”更改为“document.getElementById”的解决方案
- GetElementById not finding ID
- document.getElementById('id').selectedIndex 不读取索引,而是
- 如何使用 getElementById 和 c# 变量设置动态 id
- 需要 document.getElementById 的解决方法,以便在多个 ID 可能性之间循环.类不起作用
- getElementById 中的多个 ID
- 如何允许 document.getElementById 找不到 ID
- 如何在一个文档中使用两个id.getElementById类型函数