Question

我正在使用AddThis共享框，如下所示：

<div class="at4-share-outer addthis-smartlayers addthis-smartlayers-desktop" aria-labelledby="at4-share-label" role="region">
 <div id="at4-share-label">AddThis Sharing</div>
 <div id="at4-share" class="addthis_32x32_style atss atss-left addthis-animated slideInLeft at4-show">
  <a class="at4-share-btn at-svc-facebook" href="#"><span class=" at4-icon aticon-facebook" title="Facebook">Facebook</span></a>
  <a class="at4-share-btn at-svc-twitter" href="#"><span class=" at4-icon aticon-twitter" title="Twitter">Twitter</span></a>
  <a class="at4-share-btn at-svc-linkedin" href="#"><span class=" at4-icon aticon-linkedin" title="LinkedIn">LinkedIn</span></a>
  <a class="at4-share-btn at-svc-pinterest_share" href="#"><span class=" at4-icon aticon-pinterest_share" title="Pinterest">Pinterest</span></a>
  <a class="at4-share-btn at-svc-google_plusone_share" href="#"><span class=" at4-icon aticon-google_plusone_share" title="Google+">Google+</span></a>
  <div id="at4-scc" class="at-share-close-control ats-gray at4-show at4-hide-content" title="Hide">
   <div class="at4-arrow at-left">Hide</div>
  </div>
 </div>
 <div id="at4-soc" class="at-share-open-control-left ats-gray at4-hide" title="Show">
  <div class="at4-arrow at-right">Show</div>
 </div>
</div>

我想在GooglePlus分享按钮之后添加一个YouTube关注按钮，这将是以下代码：

<a style="background-color:#CC1F1F;" data-svc="youtube" data-svc-id="1" title="Follow on Youtube" href="http://www.youtube.com/channel/test?sub_confirmation=1" target="_blank"><span class="at4-icon at4-icon aticon-youtube"></span></a>

我在（）和insertAfter（）之后尝试了jQuery，但没有运气。

$( ".at-svc-google_plusone_share" ).after( $( "<p>Test</p>" ) );
$( "<p>Test</p>" ).insertAfter( ".at-svc-google_plusone_share" );

$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
 $( "<p>Test</p>" ).appendTo( ".at4-share-btn" );
});

可以这样做吗？

Answer 1

尝试删除$ in in jquery .after（）参数。

http://api.jquery.com/after/

你也可以在父div上使用.append（）

Answer 2

好的，终于得到了解决方案。我需要在触发函数之前添加一个TimeOut。

scripts.js文件：

(function($) {
 $( document ).ready(function() {
 setTimeout(function(){
  $( ".at-svc-google_plusone_share" ).after( "<p>Test</p>" );
 }, 1000);
 });
})(jQuery);

我需要一个wordpres网站，所以完整的解决方案包括：

add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );

function enqueue_and_register_my_scripts(){
 wp_register_script( 'addthis', 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=youridhere', array(), false, true);
 wp_register_script( 'addthis-append', 'path/js/scripts.js', array('addthis'), false, true);

 wp_enqueue_script( 'addthis' );
 wp_enqueue_script( 'addthis-append' );

}

添加/追加元素以添加此块

2 个答案: