javascript - 在 addthis 分享栏上动态更改 URL 适用于除分享计数之外的所有内容

Question

我的页面上有一个模式，页脚中有 addthis 共享按钮。我在页面上有一个项目列表，单击该列表时，通过 ajax 用内容填充模式。

我正在做的是在点击时动态更改 addthis:url 和 addthis:title 。

所以，这是被剥离到页脚的模式:

<div class="modal">
  ...
  <div class="modal-footer">
    <div class="addthis_toolbox addthis_default_style">
      <a class="addthis_button_preferred_1"></a>
      <a class="addthis_button_preferred_2"></a>
      <a class="addthis_button_preferred_3"></a>
      <a class="addthis_button_preferred_4"></a>
      <a class="addthis_button_compact"></a>
      <a class="addthis_counter addthis_bubble_style"></a>
    </div>
  </div>
</div>

然后，当单击某个项目时，我会传递一些变量来更改 url 和标题:

addthis.toolbox(".addthis_toolbox", null, { title: theTitle, url: theUrl });

问题是<a class="addthis_counter addthis_bubble_style"></a>

这是末尾的计数气泡:

网址和标题可以正常更改，但计数器永远不会更改。

我向 addthis 提交了一份支持请求，但没有得到很好的回应，询问我是否调用了 addthis.init() ，是的......我当然调用了。共享栏已初始化并正在工作，但计数未更新。

在这里搜索网络和其他问题，以及 addthis 上的文档，有很多处理基于 ajax 的内容的复杂方法。

我的代码与他们的示例的区别在于，ajax 内容包含实际的按钮，而我的代码则不包含。我的共享工具栏保留在页面上，只有 addthis:url 和 addthis:title 发生了变化。

也许我错过了一些小步骤，或者也许这是一个错误而不是我的错。

希望有人能有一些见解。

编辑

我终于收到了来自 addthis 的回复，说这是不可能的。如果调用工具箱函数，计数不会刷新。

但是下面的评论和答案中显示的约瑟夫的解决方法暂时解决了这个问题，至少在他们提供更合适的解决方案之前是这样。

Answer 1

经过多次尝试和错误，似乎 addthis.counter 方法是刷新计数器的方法。关于该方法的少量文档似乎仅指仅使用不带任何参数的方法( forum post I found )，这可能会刷新静态共享元素的计数器(这是未经证实的)；但是，当您添加用于 addthis.toolbox 方法调用的相同属性时，它会正确刷新计数器。当您调用 counter 方法时，您必须提供计数器的类，而不是工具箱。例如addthis.counter('.addthis_counter', null, { url: 'http://example.com'}); 官方文档可以在这里找到:http://support.addthis.com/customer/portal/articles/1365325-rendering-tools-with-javascript

以下是摘要代码:

HTML

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<input type="text" value="http://example.com">

JavaScript

$(function(){
    addthis_config = addthis_config || { };
    addthis_config.pubid = prompt('Provide pubid:');
    addthis.init();

    $('input').on('input',function(){
        $(".addthis_toolbox .addthis_counter").replaceWith('<a class="addthis_counter addthis_bubble_style"></a>');
        addthis.toolbox(".addthis_toolbox", null, { title: 'test', url: this.value });
        addthis.counter('.addthis_counter', null, { url: this.value });
    }).trigger('input');
});

请注意，JavaScript 会提示您输入 pubid。这仅用于演示，您可以将其更改为您的应用程序的 addthis_config.pubid = 'xx-xxxxxxxxxxxxxxx';。

演示

jsfiddle