Question

以下是显示Tweet按钮的表单上的功能代码 - 显示多个图像的表单上的按钮 - 当用户单击其中一个图像时，它变为“选定”图像，并且推文按钮被认为是发布所选图像的名称和网址：

      <a id="tweetBtnId" href="https://twitter.com/share" class="twitter-share-button" 
         data-text="Check me out on OurWebSite!"
         data-url=http://$ourSiteURL
         data-via=http://$ourSiteURL data-size="medium" data-count="none">Tweet</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0]; 
            if(!d.getElementById(id)){js=d.createElement(s); js.id=id; 
              js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}
                (document,"script", "twitter-wjs");</script>

我有一个显示图像的div的'onclick（）'处理程序。当用户单击其中一个图像时，会调用其div的onclick（）处理程序并将该图像设置为页面上的“currentSelectedImage” - 然后onclick（）处理程序需要更新Tweet按钮的“数据文本”属性与刚刚选择的图像的名称：

          // This is part of the code of the 'onclick()' handler for
          // the image being selected. 
         <script> 
         function handleImageOnClick()
         {
           var myDynamicTweetText = "name of currently-selected image goes here";
           var elem = document.getElementById("tweetBtnId");
           alert("The elem is: " + elem);  // elem IS NULL !!  Dagnabbit.

           // this fails because 'elem' is null
           elem.setAttribute("data-text", myDynamicTweetText);

           // other onclick() code not shown for brevity......
         }
         </script>

我需要动态更改Tweet按钮中的'data-text'属性值，使其成为所选图像的名称。我添加了上面的javascript代码失败 - 从这里的代码获得的'elem'：

    var elem = document.getElementById("tweetBtnId");

是null（我认为），因为上面Twitter推文按钮代码中的这一行：

   if(!d.getElementById(id)){js=d.createElement(s); js.id=id;

我不确定，但看起来Twitter Tweet按钮默认脚本会覆盖任何尝试在Tweet按钮中添加'id'属性。

你会看到我在上面的Tweet按钮中添加了 id =“tweetBtnId”，这样我就可以访问我上面的图像选择onclick（）处理程序中的Tweet按钮，然后设置'data-text'指向刚刚选择的图片的名称。

我只是怀疑Twitter的Tweet按钮的设计目标是“我们会愚蠢地将这个傻瓜推倒，我们只会让这些动物选择一个数据文本值 - 每个Tweet按钮必须有一个硬编码，“一次一页”数据文本属性 - 如果他们试图动态更改推文按钮的数据文本属性，就会开玩笑。“

我需要让这个工作 - 任何想法？

Answer 1

只需将其放入具有已知ID的容器中并使用它遍历文档：

<div id="someIDiKnow">
    <a id="tweetBtnId"...>...</a>
</div>

$("#someIDiKnow a").attr("data-text", "Replacement Text!");

Answer 2

现在看起来它将成为kludgy隐藏形式/ php变量方法 - 如果我找到更好的解决方法，我会回发。

编辑：隐藏形式/ PHP变量解决方案击败了Twitter的推文按钮设置的障碍 - 我现在可以成功地，根据用户的客户端输入随时动态更改推文按钮文本。 Per Domenic精明地观察到上面的问题太长并且有代码，我会跳过这里的答案，我为上面的长度道歉。

Answer 3

您可以使用JQuery通过在图像上添加onclick操作来更新属性数据文本。如果您想通过将自己的属性添加到标记中来将文本包含在实际图像标记内，那么组装推文文本可能很容易。

例如：

function updateTweetBtn(obj) {
   $('#someIDiKnow a').attr('data-text', $(this).attr('tweet'));
}

<img src="/images/myimage.jpg" tweet="This is what I want to tweet" onclick="updateTweetBtn(this);" />
<img src="/images/myimage2.jpg" tweet="This is some other text I want to tweet" onclick="updateTweetBtn(this);" />

Answer 4

在html中使用

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://twitter.com/share" class="twitter-share-button" data-text="old text">Tweet</a>

我设法更改了数据文本＆＃39;用javascript

var a = "new text";
document.getElementsByClassName('twitter-share-button')[0].setAttribute("data-text", a);

如果您添加id =＆＃39; twitter＆＃39;也可以使用document.getElementById（＆＃39; twitter＆＃39;）到＆lt; a＆gt;

设置推文按钮＆＃39;数据文本＆＃39;内容动态与JavaScript，或..？

4 个答案: