Javascript函数在IE<10中无法正常工作

Question

我有这个链接，它简单地隐藏了自身并显示了fb:comments元素

<a onclick="comments(this)"> + Comments (
    <fb:comments-count href="http://some.url.com" fb-xfbml-state="rendered">
        <span class="fb_comments_count">1</span>
    </fb:comments-count>
)
</a>

<div class=\"facebook-comments\"><!-- default style for this is 'display:none'-->
    <fb:comments href=\"http://some.url.com" width="644" num_posts="10">
    </fb:comments>
</div>

这是comments()函数：

function comments(src){
    //hide the 'a' element that called this function
    src.style.display="none"; 

    //show comments element 
    src.parentNode.getElementsByClassName('facebook-comments')[0].style.display="block";
    return false;
}

这在Chrome，火狐，歌剧，Safari和IE10中也运行得很好，但是在IE<10中它有错误，当我点击+ Comments (#)链接时，它消失了，但是评论目录没有出现，所以这个链接变得没有用了。

是IE的问题还是我做错了什么？

在这两种情况下，我如何解决它？

Answer 1

旧IE不支持getElementsByClassName。MDN声称支持从IE9开始。

另一种选择是querySelector或querySelectorAll。自IE8以来受支持：

src.parentNode.querySelector('.facebook-comments').style.display="block";

//OR

src.parentNode.querySelectorAll('.facebook-comments')[0].style.display="block";

如果您还想支持IE7 (或者如果您喜欢它的语法)，那么最好的选择是使用框架或库。可用的最流行的框架是jQuery ( Sizzle引擎是它的一部分，也可以单独下载)。使用jQuery：

$(src).parent().find(".facebook-comments:first").show();

如果你想避免使用外部库并且想要支持IE7，那么你的选择是相当有限的，但是getElementsByTagName仍然是可用的(从IE5.5开始)。遗憾的是，classList并非如此：

var elems = src.parentNode.getElementsByTagName("div")
for(var i = 0; i<elems.length; i++){
  elem = elems[i];
  if(elem.className.matches(/(^| )facebook-comments( |$)/){
    elem.style.display = "block";
    break;
  }
}