hide plusone button after click

问题

I want to hide google's +1 button after the user clicks on it using jQuery; this is the code I'm using but it seems it's not functioning properly:

JS:

$(function() {
  $("#button").click(function()
  {
    $(".HIDE").hide();
  });

  return false;
});

HTML:

<div class="HIDE">
  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
  <g:plusone size="small" class="plusone"></g:plusone>
</div>

回答1:

Use the +1 tag callback parameter to fire the hide function. There's probably a better way to select the +1 button but this works for the purpose of a demo.

<g:plusone size="tall" callback="poHide"></g:plusone>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>function poHide(){ $("#___plusone_0").fadeOut(); }</script>

Demo: jsfiddle.net/Gju6T

回答2:

You may want to try the HTML5 equivalent syntax:

<div class="g-plusone" data-size="standard" data-count="true"></div>

All in all, the rendered HTML will be the thing to look at.

回答3:

I think this is what you need, but put it at the end of your page just above </body>

$('g\\:plusone').live('click',function (){
   $(this).remove();
});

ELSE try this...

$('iframe').contents().find('#plusone').live('click',function (){
       $(this).remove();
    });

orrr

<script>
function mycall(str){
 console.log(str);
 //$(str).hide();//???
}
</script>
<g:plusone size="small" class="plusone" callback="mycall"></g:plusone>

回答4:

The button is rendered into an iframe you don't have access to. The <g:plusone> tag is replaced by JS with an iframe and you cannot observe this button via jQuery, for example with live() or bind(). You have to use the API of the button which can be found here. There you find the option "callback" you could use like this:

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
</script>
<script type="text/javascript">
// Call the API method after the page loaded
$(document).ready(function() {
   gapi.plusone.render("HIDE",
       {"size": "standard", "count": "true", "callback" : "hideTheButton"});
});
// Method to remove the element
function hideTheButton() {
   $("#HIDE").hide();
}
</script>
<div id="HIDE">
      <g:plusone></g:plusone>
</div>

来源：https://stackoverflow.com/questions/6254100/hide-plusone-button-after-click

标签

javascript

jquery

google-plus-one