为什么我的JavaScript无法在Firefox中使用? [英] Why does my javascript not work in Firefox?

问题描述

我有一个带有客户缩略图的页面.单击缩略图时，将加载图库.单击其他缩略图后，将加载新的画廊，以代替之前的画廊.



我的JavaScript代码可在除Firefox之外的所有浏览器中使用.如果有人可以帮助我，那就太好了.



标头中的JavaScript代码如下:

I have a page with client thumbnails. When a thumbnail is clicked on, an image gallery loads. When a different thumbnail is clicked, the new gallery will load in place of the previous one.



My javascript code is working in all browsers apart from Firefox. If anyone could help me that would be great.



The JavaScript code in my header is as follows:

<script type="text/javascript">
if(document.getElementById)
document.write('<style type="text/css">.detail {float:left;display:none;} #zero{display:block;}<\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)

if(testname(d[i].className))

ar[ar.length] = d[i];

return ar;

};

document.getElementsByClassName.spoof = true;

}

for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i)
d[i].style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
</script>

我的html代码如下:

My html code is as follows:

<div id="triggers" class="gallery-thumbs clearfix">

<h2>Event Gallery</h2>
<table>
<tr>
<td><div onclick="reveal('bb_show');"><img src="http://fnyc.zakaryfaithfull.com/wp-content/uploads/2012/01/blackberry-logo1.png" alt="" title="blackberry-logo" width="95" height="95" class="alignnone size-full wp-image-322" /></div></td>
<td><div onclick="reveal('bmw_show');"><img src="http://fnyc.zakaryfaithfull.com/wp-content/uploads/2012/01/bmw-logo3.png" alt="" title="bmw-logo" width="95" height="95" class="alignnone size-full wp-image-321" /></div></td>
<td><div onclick="reveal('converse_show');"><img src="http://fnyc.zakaryfaithfull.com/wp-content/uploads/2012/01/converse-logo1.png" alt="" title="converse-logo" width="95" height="95" class="alignnone size-full wp-image-323" /></div></td>
<td><div onclick="reveal('ysl_show');"><img src="http://fnyc.zakaryfaithfull.com/wp-content/uploads/2012/01/ysl-logo1.png" alt="" title="ysl-logo" width="95" height="95" class="alignnone size-full wp-image-324" /></div></td>
</tr>
</table>
</div>

<div class="gallery_show" style="display:block;">

<div class="detail" id="zero">
<h3 style="font-weight:bold; margin:30px 0px 0px 25px; text-transform:capitalize;">YSL Event Gallery</h3>
<p><iframe frameborder=0 id=ifid width="660" height="505" allowtransparency="true" src="/wp-admin/admin-ajax.php?action=go_view_object&viewid=8&type=html"></iframe></p>
</div>

<div class="detail" id="bb_show">
<h3 style="font-weight:bold; margin:30px 0px 0px 25px; text-transform:capitalize;">Blackberry Event Gallery</h3>
[galobj viewid=2]
</div>

<div class="detail" id="bmw_show">
<h3 style="font-weight:bold; margin:30px 0px 0px 25px; text-transform:capitalize;">BMW Event Gallery</h3>
<p><iframe frameborder=0 id=ifid width="660" height="505" allowtransparency="true" src="/wp-admin/admin-ajax.php?action=go_view_object&viewid=4&type=html"></iframe></p>
</div>

<div class="detail" id="converse_show">
<h3 style="font-weight:bold; margin:30px 0px 0px 25px; text-transform:capitalize;">Converse Event Gallery</h3>
<p><iframe frameborder=0 id=ifid width="660" height="505" allowtransparency="true" src="/wp-admin/admin-ajax.php?action=go_view_object&viewid=6&type=html"></iframe></p>
</div>
</div>

推荐答案

)'); if(！re.test(n))返回false; } 返回true； } for(var d = document.all || document.getElementsByTagName('*')，i = 0； i < d.length; ++ i) if(testname(d [i] .className)) ar [ar.length] = d [i]; 返回 ar; }; document.getElementsByClassName.spoof = true; } (var d document.getElementsByClassName(' d.length - 1; i > -1; --i) d [i] .style.display ='none'; document.getElementById(det).style.display ='block'; 如果(document.getElementsByClassName.spoof) document.getElementsByClassName.spoof = document.getElementsByClassName = null; } < /script >

)'); if(!re.test(n)) return false; } return true; } for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i) if(testname(d[i].className)) ar[ar.length] = d[i]; return ar; }; document.getElementsByClassName.spoof = true; } for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i) d[i].style.display = 'none'; document.getElementById(det).style.display = 'block'; if (document.getElementsByClassName.spoof) document.getElementsByClassName.spoof = document.getElementsByClassName = null; } </script>

我的html代码如下:

My html code is as follows:

<div id="triggers" class="gallery-thumbs clearfix">

<h2>Event Gallery</h2>
<table>
<tr>
<td><div onclick="reveal('bb_show');"><img src="http://fnyc.zakaryfaithfull.com/wp-content/uploads/2012/01/blackberry-logo1.png" alt="" title="blackberry-logo" width="95" height="95" class="alignnone size-full wp-image-322" /></div></td>
<td><div onclick="reveal('bmw_show');"><img src="http://fnyc.zakaryfaithfull.com/wp-content/uploads/2012/01/bmw-logo3.png" alt="" title="bmw-logo" width="95" height="95" class="alignnone size-full wp-image-321" /></div></td>
<td><div onclick="reveal('converse_show');"><img src="http://fnyc.zakaryfaithfull.com/wp-content/uploads/2012/01/converse-logo1.png" alt="" title="converse-logo" width="95" height="95" class="alignnone size-full wp-image-323" /></div></td>
<td><div onclick="reveal('ysl_show');"><img src="http://fnyc.zakaryfaithfull.com/wp-content/uploads/2012/01/ysl-logo1.png" alt="" title="ysl-logo" width="95" height="95" class="alignnone size-full wp-image-324" /></div></td>
</tr>
</table>
</div>

<div class="gallery_show" style="display:block;">

<div class="detail" id="zero">
<h3 style="font-weight:bold; margin:30px 0px 0px 25px; text-transform:capitalize;">YSL Event Gallery</h3>
<p><iframe frameborder=0 id=ifid width="660" height="505" allowtransparency="true" src="/wp-admin/admin-ajax.php?action=go_view_object&viewid=8&type=html"></iframe></p>
</div>

<div class="detail" id="bb_show">
<h3 style="font-weight:bold; margin:30px 0px 0px 25px; text-transform:capitalize;">Blackberry Event Gallery</h3>
[galobj viewid=2]
</div>

<div class="detail" id="bmw_show">
<h3 style="font-weight:bold; margin:30px 0px 0px 25px; text-transform:capitalize;">BMW Event Gallery</h3>
<p><iframe frameborder=0 id=ifid width="660" height="505" allowtransparency="true" src="/wp-admin/admin-ajax.php?action=go_view_object&viewid=4&type=html"></iframe></p>
</div>

<div class="detail" id="converse_show">
<h3 style="font-weight:bold; margin:30px 0px 0px 25px; text-transform:capitalize;">Converse Event Gallery</h3>
<p><iframe frameborder=0 id=ifid width="660" height="505" allowtransparency="true" src="/wp-admin/admin-ajax.php?action=go_view_object&viewid=6&type=html"></iframe></p>
</div>
</div>

This problem caught my eyes immediately:

You should not use non-standard function document.getElementsByClassName.
Please see, for example, this compatibility chart: http://www.quirksmode.org/dom/w3c_core.html[^].

What to do instead? You can always replace this code, but it would require change in HTML.
I would recommend using jQuery which is built with compatibility in mind:
http://www.quirksmode.org/dom/w3c_core.html[^],
http://jquery.com/ [ ^ ].

To get a set of elements by different criteria, you can use jQuery selectors, please see:
http://api.jquery.com/category/selectors/ [http://api.jquery.com/class-selector/[^].

To learn jQuery, start here:
http://docs.jquery.com/Main_Page[^],
http://docs.jquery.com/Tutorials [ http://docs.jquery.com/Tutorials:How_jQuery_Works [

This problem caught my eyes immediately:

You should not use non-standard function document.getElementsByClassName.
Please see, for example, this compatibility chart: http://www.quirksmode.org/dom/w3c_core.html[^].

What to do instead? You can always replace this code, but it would require change in HTML.
I would recommend using jQuery which is built with compatibility in mind:
http://www.quirksmode.org/dom/w3c_core.html[^],
http://jquery.com/[^].

To get a set of elements by different criteria, you can use jQuery selectors, please see:
http://api.jquery.com/category/selectors/[^].

To get all elements by some class, you can use the following selector:
http://api.jquery.com/class-selector/[^].

To learn jQuery, start here:
http://docs.jquery.com/Main_Page[^],
http://docs.jquery.com/Tutorials[^],
http://docs.jquery.com/Tutorials:How_jQuery_Works[^].

—SA

这篇关于为什么我的JavaScript无法在Firefox中使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！