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>

并且它本身可以正常工作，但如果我想在文章末尾添加第二个按钮，它就不起作用了。第二个按钮不会更改并保持为链接而不是iframe。

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

Answer 1

对于您创建的每个按钮，请在链接末尾添加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按钮

2 个答案: