动态修改标签onclick事件 - 我疯了 [英] Modifying A tag onclick events dynamically - am I crazy
问题描述
大家好，
我已经和这个人争斗了好几个小时了 - 我希望你能帮助我！b $ b我！
我的代码修改了< aon页面，从标准文档链接到
a链接和定制的onclick事件。
它完美地工作（将正确的图像和正确的
onclick事件分配到正确的< atags）：
（a）如果只有一个链接页面和
（b）如果我一次修改一个< atags - 硬编码（如果页面上有多个链接，那么
多个链接）。
但是，如果页面上有多个链接，我的代码会将每个onclick事件分配给数组中的所有先前节点
而不是每个人独立的
。 （我已经评论了有问题的
javascript行，其中这是问题行）。我一定不能错过
的东西！
这是一个包含代码的页面（包括一个虚拟的loadDoc函数）。这个
应该按原样显示问题（图像显然不会显示）：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.0 Transitional // EN">
< html>
< head>
< title>修改A链接< / title>
< link href =" ProdsolEpd.css"的rel ="样式表"类型= QUOT;文本/ CSS" />
< script type =" text / javascript" src =" ProdsolEpd.js">< / script>
< script language =" JavaScript" type =" text / javascript">
函数ModifyLinks（）
{
//创建文档链接
var docArray = document.getElementsByTagName（''font''）;
var sourceHTML，sourceHref，path，doc，ext，img，docName，fontNode，
linkNode ，imageNode;
for（var d = 0; d< docArray.length; d ++）
{
if（docArray [d]。 className ==''doc''）
{
//获取值
fontNode = docArray [d];
sourceHTML = fontNode.innerHTML;
sourceHref =（sourceHTML.substring（sourceHTML.indexO f（''"''）+ 1，sourceHTML.indexOf（''">' '）））;
path = sourceHref.substring（sourceHref.indexOf（''/''，8））;
doc = path.substring（path.lastIndexOf （''/''）+ 1）;
ext = doc.substr（doc.length - 3）;
docName = fontNode.innerText;
//确定图像
switch（sourceHTML.substr（sourceHTML.indexOf（''>' ）-4,3））
{
情况下 doc的：IMG = QUOT; msword.png英寸;休息;
case''xls''：img =" msexcel.png" ;;休息;
case''ppt''：img =" mspowerpoint.png" ;;打破;
case''pdf''：img =" pdf.png" ;;休息;
}
linkNode = fontNode.children（0）;
linkNode.setAttribute（''href''，''＃' '）;
imageNode =
linkNode.insertBefore（document.createElement（''img''），linkNode.firstChild）;
imageNode .src =''Skins / Standard /''+ img;
imageNode.alt = docName;
linkNode.onclick = function（）{loadDoc（sourceHref）}; //这是
问题行
}
}
}
function loadDoc（filespec）
{
//用于测试onclick事件编码的虚拟代码
alert（filespec）;
}
window.onload = ModifyLinks;
// - >
< / script>
< / head>
< body>
< h3>动态修改标签< / h3>
< font class =''doc''>< a
href =" http：// localhost：1411 / UserData / Test1.doc">文档
1< / a>& lt; / font>< br />
< font class =''doc''>< a
href =" http：// localhost：1411 / UserData / Test1.xls">电子表格
1< / a>< / font>< br />
< font class = ''doc''>< a
href =" http：// localhost：1411 / UserData / Test1.ppt">演示
1< / a>< / font>< br />
< font class =''doc''>< a
href =" http： //localhost:1411/UserData/Test2.doc">Document
2< / a>< / font>< br />
< / body>
< / html>
我将非常感谢你的帮助 - 无法弄清楚！
非常感谢。
问候
加里
gb at prodsol dot co dot nz
Hi Guys,
I''ve been battling with this one for hours - I hope that you can help
me!
My code modifies the <aon a page, from a standard document link into
a link with a tailored onclick event.
It works perfectly (assigning the correct images and the correct
onclick events to the correct <atags):
(a) If there''s only one link on the page and
(b) If I modify the <atags one at a time - hardcoding (if there''s
more than one link on the page).
However, if there''s more than one link on the page, my code assigns
each onclick event to all of the previous nodes in the array instead of
each one independently. (I''ve commented the problematic line of
javascript, with "THIS IS THE PROBLEM LINE"). I must be missing
something!
Here''s a page with the code (including a dummy loadDoc function). It
should show the problem as is (the images obviously won''t show):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Modify A Links</title>
<link href="ProdsolEpd.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ProdsolEpd.js"></script>
<script language="JavaScript" type="text/javascript">
function ModifyLinks()
{
//Create Document links
var docArray = document.getElementsByTagName(''font'');
var sourceHTML, sourceHref, path, doc, ext, img, docName, fontNode,
linkNode, imageNode;
for(var d=0;d<docArray.length;d++)
{
if(docArray[d].className==''doc'')
{
//Get values
fontNode = docArray[d];
sourceHTML = fontNode.innerHTML;
sourceHref=(sourceHTML.substring(sourceHTML.indexO f(''"'')+1,sourceHTML.indexOf(''">'')));
path = sourceHref.substring(sourceHref.indexOf(''/'',8));
doc = path.substring(path.lastIndexOf(''/'')+1);
ext = doc.substr(doc.length - 3);
docName = fontNode.innerText;
//Determine image
switch(sourceHTML.substr(sourceHTML.indexOf(''>'')-4,3))
{
case ''doc'' : img="msword.png"; break;
case ''xls'' : img="msexcel.png"; break;
case ''ppt'' : img="mspowerpoint.png"; break;
case ''pdf'' : img="pdf.png"; break;
}
linkNode = fontNode.children(0);
linkNode.setAttribute(''href'',''#'');
imageNode =
linkNode.insertBefore(document.createElement(''img'' ),linkNode.firstChild);
imageNode.src = ''Skins/Standard/''+img;
imageNode.alt = docName;
linkNode.onclick = function(){loadDoc(sourceHref)};//THIS IS THE
PROBLEM LINE
}
}
}
function loadDoc(filespec)
{
//Dummy code to test the onclick event coding
alert(filespec);
}
window.onload = ModifyLinks;
//-->
</script>
</head>
<body>
<h3>Dynamically Modifying A Tags</h3>
<font class=''doc''><a
href="http://localhost:1411/UserData/Test1.doc">Document
1</a></font><br />
<font class=''doc''><a
href="http://localhost:1411/UserData/Test1.xls">Spreadsheet
1</a></font><br />
<font class=''doc''><a
href="http://localhost:1411/UserData/Test1.ppt">Presentation
1</a></font><br />
<font class=''doc''><a
href="http://localhost:1411/UserData/Test2.doc">Document
2</a></font><br />
</body>
</html>
I''d be very grateful for your help - can''t figure it out!
Thanks very much.
Regards
Gary
gb at prodsol dot co dot nz
推荐答案
GaryB写道：
< snip> ;
GaryB wrote:
<snip>
但是，如果页面上有多个链接，我的代码会将
每个onclick事件分配给以前的所有链接数组中的节点而不是每个独立的
。 （我已经评论了有问题的
javascript行，其中这是问题行）。我一定不能错过
的东西！
However, if there''s more than one link on the page, my code assigns
each onclick event to all of the previous nodes in the array instead of
each one independently. (I''ve commented the problematic line of
javascript, with "THIS IS THE PROBLEM LINE"). I must be missing
something!
< snip>
<snip>
for（var d = 0; d< docArray.length; d ++）
{
if（ docArray [d] .className ==''doc''）
{
//获取值
fontNode = docArray [d];
sourceHTML = fontNode.innerHTML;
sourceHref =（sourceHTML.substring（sourceHTML.indexO f（''"''）+ 1，sourceHTML.indexOf（'' "> ''）））;
for(var d=0;d<docArray.length;d++)
{
if(docArray[d].className==''doc'')
{
//Get values
fontNode = docArray[d];
sourceHTML = fontNode.innerHTML;
sourceHref=(sourceHTML.substring(sourceHTML.indexO f(''"'')+1,sourceHTML.indexOf(''">'')));
要获得锚标记的''href''我建议使用
var anchor = fontNode.getElementsByTagName（' 'A''）[0];
var href = anchor.href;
To get the ''href'' of the anchor tag I''d suggest using
var anchor = fontNode.getElementsByTagName( ''A'' )[0];
var href = anchor.href;
path = sourceHref.substring（sourceHref.indexOf（ ''/''，8））;
doc = path.substring（path.lastIndexOf（''/''）+ 1）;
ext = doc。 substr（doc.length - 3）;
docName = fontNode.innerText;
//确定图像
switch（sourceHTML.substr（sourceHTML） .indexOf（''>''） - 4,3））
{
case''doc''：img =" msword.png" ;;休息;
case''xls''：img =" msexcel.png" ;;休息;
case''ppt''：img =" mspowerpoint.png" ;;打破;
case''pdf''：img =" pdf.png" ;;休息;
}
linkNode = fontNode.children（0）;
path = sourceHref.substring(sourceHref.indexOf(''/'',8));
doc = path.substring(path.lastIndexOf(''/'')+1);
ext = doc.substr(doc.length - 3);
docName = fontNode.innerText;
//Determine image
switch(sourceHTML.substr(sourceHTML.indexOf(''>'')-4,3))
{
case ''doc'' : img="msword.png"; break;
case ''xls'' : img="msexcel.png"; break;
case ''ppt'' : img="mspowerpoint.png"; break;
case ''pdf'' : img="pdf.png"; break;
}
linkNode = fontNode.children(0);
再次，
linkNode = fontNode.getElementsByTagName（''A''）[0];
如果你有这样的空格（下划线代表空格）
< font> _< a ..>
children（0）==''''。至少那就是它如何使用DOM子节点
数组
Again,
linkNode = fontNode.getElementsByTagName( ''A'' )[0];
if you had a space like this ( underscore representing space )
<font>_<a..>
children(0) == '' '' .. At least that''s how it is using DOM childNodes
array
linkNode.setAttribute（''href''，'' ＃ ''）;
linkNode.setAttribute(''href'',''#'');
不要删除href
Don''t remove the href
imageNode =
linkNode .insertBefore（document.createElement（''img''），linkNode.firstChild）;
imageNode.src =''Skins / Standard /''+ img;
imageNode.alt = docName;
linkNode.onclick = function（）{loadDoc（sourceHref）}; //这是
问题行
}
imageNode =
linkNode.insertBefore(document.createElement(''img'' ),linkNode.firstChild);
imageNode.src = ''Skins/Standard/''+img;
imageNode.alt = docName;
linkNode.onclick = function(){loadDoc(sourceHref)};//THIS IS THE
PROBLEM LINE
}
linkNode.onclick = function（）{loadDoc（this.href）;返回false};
返回false;语句阻止浏览器采取
默认操作，即按照链接
linkNode.onclick = function() { loadDoc( this.href ); return false };
the return false; statement prevents the browser from taking the
default action, which is to follow the link
}
}
函数loadDoc（filespec）
{
//用于测试onclick事件编码的虚拟代码
alert（ filespec）;
}
window.onload = ModifyLinks;
// - >
< / script>
< / head>
< body>
< h3>动态修改标签< / h3>
< font class =''doc''>< a
href =" http：// localhost：1411 / UserData /Test1.doc">Document
1< / a>< / font>< br />
< font class =''doc'' >< a
href =" http：// localhost：1411 / UserData / Test1.xls">电子表格
1< / a>< / font>< br />
< font class =''doc''>< a
href =" http：// localhost：1411 /的UserData /测试1。 ppt">演示
1< / a>< / font>< br />
< font class =''doc''>< ;
href =" http：// localhost：1411 / UserData / Test2.doc">文件
2< / a>< / font>< ; br />
< / body>
< / html>
我''我非常感谢你的帮助 - 无法理解！
非常感谢。
问候
Gary
gb at prodsol dot co dot nz
}
}
function loadDoc(filespec)
{
//Dummy code to test the onclick event coding
alert(filespec);
}
window.onload = ModifyLinks;
//-->
</script>
</head>
<body>
<h3>Dynamically Modifying A Tags</h3>
<font class=''doc''><a
href="http://localhost:1411/UserData/Test1.doc">Document
1</a></font><br />
<font class=''doc''><a
href="http://localhost:1411/UserData/Test1.xls">Spreadsheet
1</a></font><br />
<font class=''doc''><a
href="http://localhost:1411/UserData/Test1.ppt">Presentation
1</a></font><br />
<font class=''doc''><a
href="http://localhost:1411/UserData/Test2.doc">Document
2</a></font><br />
</body>
</html>
I''d be very grateful for your help - can''t figure it out!
Thanks very much.
Regards
Gary
gb at prodsol dot co dot nz
GaryB写道：
GaryB wrote:
嗨大家好，
我已经和这个人争斗了几个小时 - 我希望你能提供帮助
我！
我的代码修改了< aon页面，从标准文档链接到
a链接与定制的onclick活动。
它完美地工作（分配正确的图像和正确的
onclick e通向正确的< atags）：
（a）如果页面上只有一个链接并且
（b）如果我修改< atags一次一个 - 硬编码（如果页面上有一个以上链接
）。
但是，如果有超过在页面上有一个链接，我的代码将每个onclick事件分配给数组中的所有先前节点而不是每个独立的
。 （我已经评论了有问题的
javascript行，其中这是问题行）。我一定不能错过
的东西！
这是一个包含代码的页面（包括一个虚拟的loadDoc函数）。这个
应该按原样显示问题（图像显然不会显示）：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.0 Transitional // EN">
Hi Guys,
I''ve been battling with this one for hours - I hope that you can help
me!
My code modifies the <aon a page, from a standard document link into
a link with a tailored onclick event.
It works perfectly (assigning the correct images and the correct
onclick events to the correct <atags):
(a) If there''s only one link on the page and
(b) If I modify the <atags one at a time - hardcoding (if there''s
more than one link on the page).
However, if there''s more than one link on the page, my code assigns
each onclick event to all of the previous nodes in the array instead of
each one independently. (I''ve commented the problematic line of
javascript, with "THIS IS THE PROBLEM LINE"). I must be missing
something!
Here''s a page with the code (including a dummy loadDoc function). It
should show the problem as is (the images obviously won''t show):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
考虑进入21世纪并使用4.01严格。
[...]
Consider moving into the 21st century and use 4.01 strict.
[...]
< script language =" JavaScript"类型= QUOT;文本/ JavaScript的">
<script language="JavaScript" type="text/javascript">
语言属性已被弃用多年，你可以将b $ b删除它。
The language attribute has been deprecated for many years, you can
remove it.
函数ModifyLinks（）
{
//创建文档链接
var docArray = document.getElementsByTagName（ '' 字体 ''）;
function ModifyLinks()
{
//Create Document links
var docArray = document.getElementsByTagName(''font'');
考虑用跨度替换已弃用的字体元素 - 但在任何
的情况下，document.links集合为您提供所有链接（A
元素）无论如何。
请不要使用标签，使用2或4个空格来缩进发布的代码和
将它包装成大约70个字符以防止自动换行（
总是会引入更多错误）。
Consider replacing the deprecated font elements with spans - but in any
case, the document.links collection gives you all the links (A
elements) anyway.
Please don''t use tabs, use 2 or 4 spaces for indenting posted code and
wrap it at about 70 characters to prevent auto-wrapping (which
invariably introduces more errors).
var sourceHTML， sourceHref，path，doc，ext，img，docName，fontNode，
linkNode，imageNode;
for（var d = 0; d< docArray.length; d ++）
var sourceHTML, sourceHref, path, doc, ext, img, docName, fontNode,
linkNode, imageNode;
for(var d=0;d<docArray.length;d++)
您可以在这里使用链接集合：
var link，links = document.links;
for（var i = 0，len = links.length; i ++）{
link = links [i];
You could use the links collection here:
var link, links = document.links;
for (var i=0, len=links.length; i++){
link = links[i];
{
if（docArray [d] .className ==''doc''）
{
if(docArray[d].className==''doc'')
测试是否可能更好oc''是类名之一，而不是唯一的类名。
。元素可以分配多个CSS类
。
It may be better to test if ''doc'' is one of the class names, rather
than the only class name. Elements can have multiple CSS classes
assigned to them.
{
//获取值
fontNode = docArray [d];
sourceHTML = fontNode.innerHTML;
sourceHref =（sourceHTML.substring（sourceHTML.indexO f（ '' " ''）+ 1，sourceHTML.indexOf（ '' "> ''）））;
{
//Get values
fontNode = docArray[d];
sourceHTML = fontNode.innerHTML;
sourceHref=(sourceHTML.substring(sourceHTML.indexO f(''"'')+1,sourceHTML.indexOf(''">'')));
这是一种非常复杂的获取href值的方法。使用链接
集合：
sourceHref = link.href;
That is a very convoluted way to get the href value. Using the links
collection:
sourceHref = link.href;
path = sourceHref.substring（sourceHref.indexOf（''/''，8））;
doc = path.substring（path.lastIndexOf（''/''）+ 1）;
ext = doc.substr（doc.length - 3）;
docName = fontNode.innerText;
path = sourceHref.substring(sourceHref.indexOf(''/'',8));
doc = path.substring(path.lastIndexOf(''/'')+1);
ext = doc.substr(doc.length - 3);
docName = fontNode.innerText;
innerText是IE专有属性，
其他浏览器不支持。 W3C等价物是textContent，搜索档案
用于跨浏览器解决方案 - 但无论如何都不需要这里。所有你对b $ b似乎感兴趣的是扩展名：
var ext = sourceHref.substr（sourceHref.length - 3）;
innerText is an IE proprietary property, it is not well supported by
other browsers. The W3C equivalent is textContent, search the archives
for cross browser solutions - but it isn''t needed here anyway. All you
seem interested in is the extension:
var ext = sourceHref.substr(sourceHref.length - 3);
//确定图像
switch（sourceHTML.substr（sourceHTML.indexOf（''>''） - 4,3））
//Determine image
switch(sourceHTML.substr(sourceHTML.indexOf(''>'')-4,3))
你没有把扩展名放到''ext''吗？
Didn''t you already put the extension into ''ext''?
{
case''doc''：img =" msword.png" ;;休息;
case''xls''：img =" msexcel.png" ;;休息;
case''ppt''：img =" mspowerpoint.png" ;;打破;
case''pdf''：img =" pdf.png" ;;休息;
}
{
case ''doc'' : img="msword.png"; break;
case ''xls'' : img="msexcel.png"; break;
case ''ppt'' : img="mspowerpoint.png"; break;
case ''pdf'' : img="pdf.png"; break;
}
你也可以用一个对象来做：
var extObj = {
doc：''msword.png''，
xls：''msexcel.png''，
ppt：'' mspowerpoint.png''，
pdf：''pdf.png''
}
img = extObj [ext];
You could also do that with an object:
var extObj = {
doc : ''msword.png'',
xls : ''msexcel.png'',
ppt : ''mspowerpoint.png'',
pdf : ''pdf.png''
}
img = extObj[ext];
linkNode = fontNode.children（0）;
linkNode.setAttribute（''href''，''＃''） ;
linkNode = fontNode.children(0);
linkNode.setAttribute(''href'',''#'');
为什么你没有这样做才能获得链接，而不是
innerHTML？无论如何，现在你已经有了这个链接的参考：
link.href =''＃'';
Why didn''t you do that to get the link in the first place, instead of
innerHTML? Anyhow, now you already have a reference to the link:
link.href = ''#'';
imageNode =
linkNode.insertBefore（document.createElement（''img''），linkNode.firstChild）;
imageNode.src =''Skins /标准/''+ img;
imageNode.alt = docName;
linkNode.onclick = function（）{loadDoc（sourceHref）}; //这是
问题行
imageNode =
linkNode.insertBefore(document.createElement(''img'' ),linkNode.firstChild);
imageNode.src = ''Skins/Standard/''+img;
imageNode.alt = docName;
linkNode.onclick = function(){loadDoc(sourceHref)};//THIS IS THE
PROBLEM LINE
您正在创建一个回到本地变量sourceHref的闭包。每个
onclick事件都会传递相同的值，这是函数退出时
sourceHref所具有的值。
搜索存档修复。最简单的（虽然可能不是''最好''），给定sourceHref是一个字符串的
，是使用另一个小函数
添加onclick，类似于：
...
addOnclick（linkNode，loadDoc，sourceHref）;
...
函数addOnclick（obj，func，parm）{
obj.onclick = function（）{func（parm）;}
}
使用
替换一个非常好的href似乎完全是浪费时间，这是一个有问题的onclick。为什么不添加图像/图标和
单独留下足够的空间？
You are creating a closure back to the local variable sourceHref. Each
onclick event is passed the same value, which is whatever value
sourceHref had when the function exited.
Search the archives for fixes. The simplest (though maybe not ''best''),
given that sourceHref is a string, is to use another small function to
add the onclick, something like:
...
addOnclick(linkNode, loadDoc, sourceHref);
...
function addOnclick(obj, func, parm){
obj.onclick = function(){func(parm);}
}
It seems a complete waste of time to replace a perfectly good href with
an onclick that is problematic. Why not just add the images/icons and
leave well enough alone?
}
}
}
函数loadDoc（filespec）
{
//用于测试onclick事件的虚拟代码编码
alert（filespec）;
}
window.onload = ModifyLinks;
// - > ;
}
}
}
function loadDoc(filespec)
{
//Dummy code to test the onclick event coding
alert(filespec);
}
window.onload = ModifyLinks;
//-->
不要在脚本元素中使用HTML注释分隔符 - 它们是完全没必要的并且可能会导致问题（但上面的那个
不，它被解释为注释行并被忽略）。
Do not use HTML comment delimiters inside script elements - they are
completely unnecessary and may cause problems (but the one above
doesn''t, it is interpreted as a comment line and is ignored).
< / script>
< / head>
< body>
< h3>动态修改标签< / h3>
< font class =''doc''>< a
href =" http：// localhost：1411 / UserData / Test1.doc"> Document
1< / a>< / font>< br />
</script>
</head>
<body>
<h3>Dynamically Modifying A Tags</h3>
<font class=''doc''><a
href="http://localhost:1411/UserData/Test1.doc">Document
1</a></font><br />
不要在HTML文档中使用XHTML语法 - 浏览器在其显示结束''>'的权利范围内非常可靠
'（但可能不会）。
也是无效的HTML，可以将A元素放入FONT元素中。
[...]
-
Rob
Do not use XHTML syntax in an HTML document - the browser is quite
within its rights to display the closing ''>'' (but probably wont). It
is also invalid HTML to put an A element inside a FONT element.
[...]
--
Rob
RobG写道：
[...]
RobG wrote:
[...]
将A元素放入FONT元素中也是无效的HTML。
It is also invalid HTML to put an A element inside a FONT element.
哎呀，不是不是 - 我在那里有点过分热心！ :-)
-
Rob
Ooops, not it''s not - I got a bit over-zealous there! :-)
--
Rob
这篇关于动态修改标签onclick事件 - 我疯了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
