javascript - 点击后隐藏plusone按钮

Question

我想在用户使用jQuery点击它后隐藏谷歌的+1按钮；这是我正在使用的代码，但它似乎无法正常运行：

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>

Answer 1

使用+1 标记callback参数触发隐藏功能。选择 +1 按钮可能有更好的方法，但这适用于演示。

<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>

演示：jsfiddle.net/Gju6T

Answer 2

我认为这是您需要的，但请将其放在页面末尾的上方</body>

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

否则试试这个...

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

或

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

Answer 3

您可能想尝试 HTML5 等效语法：

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

总而言之，渲染的 HTML 将是值得一看的东西。

Answer 4

该按钮将呈现到您无权访问的 iframe 中。标签被<g:plusone>JS 替换为 iframe，您无法通过 jQuery 观察此按钮，例如使用 live() 或 bind()。您必须使用可在此处找到的按钮 API 。在那里，您可以找到可以像这样使用的选项“回调”：

<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>