同一页面上的多个 Pin-it 按钮

Question

我在一篇文章中使用以下代码创建了一个 Pinterest 按钮：

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"  data-pin-color="red"></a>

当然我也有 JS:

<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

它本身工作正常，但如果我想在文章末尾添加第二个按钮，它就不起作用了。第二个按钮没有改变并保持为 link 而不是 iframe。

这是可能的还是我做错了什么？

Answer 1

对于您创建的每个按钮，在 link 的末尾添加一个 ID：

 <a href="//www.pinterest.com/pin/create/button/0" data-pin-do="buttonBookmark"  data-pin-color="red"></a>
 <a href="//www.pinterest.com/pin/create/button/1" data-pin-do="buttonBookmark"  data-pin-color="red"></a>
 <a href="//www.pinterest.com/pin/create/button/2" data-pin-do="buttonBookmark"  data-pin-color="red"></a>...

Answer 2

<span class="pin-me">Custom HTML Button</span>
<script>
    function pinIt()
        {
        var e = document.createElement('script');
        e.setAttribute('type','text/javascript');
        e.setAttribute('charset','UTF-8');
        e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
        document.body.appendChild(e);
        }


    $('body').on('click', '.pin-me', function(){
            pinIt();
        });
</script>

同一页面上的多个 Pin-it 按钮

Multiple Pin-it button on the same page

javascript

button

pinterest