如果Facebook评论为0，则隐藏div

Question

I'm using Facebook social plugin and everything works fine. I want to hide the div of my "chat bubble"

if

<span class="fb-comments-count" data-href="[article URL]"></span>

is zero for each article loaded on my homepage and ofcourse keep the not zero ones. Also additional information, I'm using a "show more" button to load other articles using ajax as well.

I already tried using http://graph.facebook.com/ to get the information whether the address contains comments and it worked, but because I needed to ping http://graph.facebook.com/ for each article, my page loading times was abysmal so I removed that.

Answer 1

Create a function iterate over span having "fb-comments-count" class. And find if the text of this span is zero or not. If it's zero, get the parent of this class(Article DIV) and hide the bubble DIV using hide() method.

https://api.jquery.com/each/
//for iterating .fb-comments-count

http://api.jquery.com/text/
//for getting get count from span

https://api.jquery.com/parent/
//to get the parent DIV by class or ID of span

http://api.jquery.com/hide/
//to hide the perticular div by class or ID.

Call this function every time you fetch the articles using AJAX.

eg

function yourCustomFunction() {
    $('span.fb-comments-count').each(function(index) {
         var count=$(this).text();
         if(count==0) {
              var parentDiv=$(this).parent('article.yourParentDivClass');

              parentDiv.find('.bubbleDiv').hide();
         }
    });
}

Answer 2

如果没有注释，则将跨度指定为类'fb_comments_count_zero'，因此您可以将该样式设置为显示：在样式表中为none