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です( 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 に答える