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，Firefox，Opera，Safari和IE10中运行良好，但它在IE＆lt; 10中有问题，当我点击+ Comments (#)链接时它会消失，但注释div没有出现，所以链接变得无用。

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

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

Answer 1

旧IE不支持

getElementsByClassName。自IE9以来，MDN声称支持。

另一个选项是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仍然可用（因为IE 5.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;
  }
}

Javascript函数在IE＆lt; 10中无法正常工作

1 个答案: