Question

我正在尝试将共享按钮放入网站。我找到了一个名为AddThis的好网站，这就是我能够整理的内容：

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"
  addthis:url="http://example.com"
  addthis:title="An Example Title"
  addthis:description="An Example Description">
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_google_plusone_badge"></a>
  <a class="addthis_button_linkedin"></a>
  <a class="addthis_button_compact"></a>
  <a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61"></script>
<!-- AddThis Button END -->

我可以将所有内容粘贴到html页面中，并且显示正确。但是，链接，标题和描述必须是变量，而不是“http://example.com”。用户界面基于Javascript，并为用户提供连续评分的文章。链接，标题和说明变量为story_link，story_title和story_description。

我尝试将所有内容放入Javascript中的变量中：

var story_link_href = '<a href="' + story_link + '" target="_blank" >Read more...</a><br /><br /><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="' + story_link + '" addthis:title="' + story_title + '" addthis:description="' + story_description + '"><a class="addthis_button_facebook"></a><a class="addthis_button_twitter"></a><a class="addthis_button_google_plusone_badge"></a><a class="addthis_button_linkedin"></a><a class="addthis_button_compact"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61"></script><!-- AddThis Button END -->';

问题是，整篇文章文章和共享按钮都在<p>标记内。据我所知，<div>标记在<p>标记内不起作用。

我对Javascript和HTML几乎一无所知，所以一切都只是猜测。我可以将第一批代码直接粘贴到HTML中并拥有静态链接，或者如果我将其粘贴到Javascript中，则不会显示任何内容。它们的工作方式都不应该如此。

是否有办法将“story_link”，“story_title”和“story_description”变量传递给HTML，并在新文章出现时继续传递新信息，或者是否有其他方法将该代码集成到Javascript中，让<p>仍然围绕着一切吗？

Answer 1

<div>内的{p> <p>不是有效的HTML，但它们确实有用。

如果您想在<div>内找到<p>，请将addThis中的“div”标记替换为“span”，如下所示：

<!-- AddThis Button BEGIN -->
<span class="addthis_toolbox addthis_default_style addthis_32x32_style"
  addthis:url="http://example.com"
  addthis:title="An Example Title"
  addthis:description="An Example Description">
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_google_plusone_badge"></a>
  <a class="addthis_button_linkedin"></a>
  <a class="addthis_button_compact"></a>
  <a class="addthis_counter addthis_bubble_style"></a>
</span>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61"></script>
<!-- AddThis Button END -->

它无法正常工作，因为您无法按照自己的方式编写脚本标记。您应该始终拆分脚本标记或将其附加到正文，如下所示：

var story_link = "http://google.com",
    story_title = "Title",
    story_description = "Description";

var story_link_href = '<a href="' + story_link + '" target="_blank" >Read more...</a><br /><br />'
    +'<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="'
    + story_link + '" addthis:title="' + story_title + '" addthis:description="' + story_description 
    + '"><a class="addthis_button_facebook"></a><a class="addthis_button_twitter"></a><a class="addthis_button_google_plusone_badge"></a><a class="addthis_button_linkedin"></a><a class="addthis_button_compact"></a></div>';


var atscript = document.createElement( 'script' );

atscript.type = 'text/javascript';
atscript.src = 'http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61';
document.body.appendChild(atscript);
document.write(story_link_href)

这是一个更新。使用它代替您在问题中发布的代码。放弃上面我在这个答案中发布的JS代码。我确定下面的代码可以正常工作。

var story_link_href = '<a href="' + story_link + '" target="_blank" >Read more...</a><br /><br />'
    +'<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="'
    + story_link + '" addthis:title="' + story_title + '" addthis:description="' + story_description 
    + '"><a class="addthis_button_facebook"></a><a class="addthis_button_twitter"></a><a class="addthis_button_google_plusone_badge"></a><a class="addthis_button_linkedin"></a><a class="addthis_button_compact"></a></div><scr'+'ipt type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f0a28da71ac4a61"></scr'+'ipt>';

Answer 2

问题与我实施的一些代码有关，这些代码剥离了＃34; class＆＃34;属性，它是从AddThis标签中剥离类。接下来，AddThis Javascript文件未在正确的位置初始化，需要在适当的位置使用addthis.init()进行调用。 Sandeep和我一起解决了这个问题，所以他得到了信任。

添加此div标签内的按钮不会使用Javascript代码显示在p标签内

2 个答案: