0

我有这个链接，它只是隐藏自己并显示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<10 中存在问题，碰巧当我单击+ Comments (#)链接时它会消失但评论 div 没有出现，因此链接变得无用。

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

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

4

1 回答 1

3

getElementsByClassName旧 IE 不支持。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仍然可用（从 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;
  }
}
于 2013-04-25T10:03:50.503 回答