Javascript无法正常工作
问题描述:
我使用此代码在您将鼠标悬停在其上时(星级系统)使星星点亮。它在Chrome中绝对完美,但是当我尝试在IE中使用它时,它什么也没做。任何人都可以帮助我在IE中做这项工作? (是的,我知道代码看起来很可怕,我对JavaScript很陌生,这可能是为什么会发生这种错误)。我很确定它来自这部分的Javascript代码,使所有的东西都没有定义:Javascript无法正常工作
var star_all = document.getElementsByName('stars');
for (x in star_all){
var stars = new Array();
stars[0]=childbyid(star_all[x], 'str1');
不管怎么说,这里是所有的代码:
HTML代码:
<div name="stars" class="stars">
<input name="bob" id="hid" type="hidden" />
<div id="str1" style="display: inline-block;" class="no_star"></div>
<div id="str2" style="display: inline-block;" class="no_star"></div>
<div id="str3" style="display: inline-block;" class="no_star"></div>
<div id="str4" style="display: inline-block;" class="no_star"></div>
<div id="str5" style="display: inline-block;" class="no_star"></div>
</div>
JavaScript代码:
<script type="text/javascript">
function isElement(obj) {
try {
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
function childbyid(el, str)
{
var children = el.childNodes;
for(i in children)
{
if (isElement(children[i]) === true && typeof children[i] != 'undefined')
{
if (children[i].getAttribute('id') == str)
{
return children[i];
}
}
}
}
var star_bob = new Array();
function select(arr, n)
{
star_bob[arr][2] = n;
star_bob[arr][1].setAttribute("value", n+1);
if (document.getElementById('star_post') != null)
{
document.getElementById('star_post').submit();
}
}
function highlight(arr, n)
{
if (n == -1)
{
n = star_bob[arr][2];
}
arr = star_bob[arr][0];
for (z in arr){
if (z <= n){
arr[z].setAttribute("class", "full_star")
}
else
{
arr[z].setAttribute("class", "no_star")
}
}
}
var star_all = document.getElementsByName('stars');
for (x in star_all){
var stars = new Array();
stars[0]=childbyid(star_all[x], 'str1');
stars[1]=childbyid(star_all[x], 'str2');
stars[2]=childbyid(star_all[x], 'str3');
stars[3]=childbyid(star_all[x], 'str4');
stars[4]=childbyid(star_all[x], 'str5');
for (o in stars){
if (typeof stars[o] != 'undefined')
{
stars[o].setAttribute("onmouseover", "highlight(" + x + ", " + o + ")")
stars[o].setAttribute("onmouseout", "highlight(" + x + ", -1)")
stars[o].setAttribute("onclick", "select(" + x + ", " + o + ")");
}
}
if (typeof star_all[x] == "object")
{
star_bob[x] = new Array(stars, childbyid(star_all[x],"hid"),-1);
}
}
</script>
答
你有几个问题:
div元素没有name属性,所以不要使用它。如果你想分组元素,请使用一个类。
getElementsByName返回一个活动的NodeList,最好使用索引来遍历它,因为它可能具有您不期望的可枚举属性。
isElement测试是垃圾,你正在遍历一个NodeList,所以它的一切都是一个节点。要过滤元素,请抓取nodeType == 1的元素。浏览器不必将元素实现为ECMAScript对象,因此不要期望它们。
更好地将样式放入样式表中。
由于id的唯一性(除非您期望id可能不在应该出现的位置),childbyid函数可以被单个getElementById调用替代。
不像HTML那样编码,它不是XML。
的替换isElement功能(便宜和讨厌的,但有效的这种情况下):
function isElement(obj) {
return obj && obj.nodeType == 1;
}
的替换childbyid功能(似乎毫无意义,应该只使用的getElementById):
function childbyid(el, str) {
var children = el.childNodes;
var i = children.length;
while (i--){
if (children[i].id == str) {
return children[i];
}
}
}
可能不会解决所有问题,但可能会有所帮助。整个事情需要重新编写,不要使用jQuery或任何其他库,首先学习JavaScript。然后你会意识到你不需要jQuery。
好吧,star_bob是在if语句中创建的,所以也许它永远不会被创建。 – 2011-06-16 03:44:10
请勿使用'for ... in'来遍历数组。它意味着对象。 https://developer.mozilla.org/en/JavaScript/Reference/Statements/for...#############为什么不使用跨浏览器库?那'isElement'功能就是一场灾难。我很欣赏你试图在不依赖DOM库的情况下学习JavaScript,但这对我来说似乎并不富有成效。 – 2011-06-16 03:56:56
是的,我应该使用jQuery。我只是觉得用普通的JS会比较容易。 – Matt 2011-06-16 04:06:10