4

这是显示 Tweet 按钮的表单上的功能代码 - 该按钮位于显示多个图像的表单上 - 当用户单击其中一个图像时，它成为“选定”图像，并且 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() 处理程序并将该图像设置为页面上的“currentlySelectedImage”——然后 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 按钮，然后将“数据文本”设置为刚刚选择的图像。

我只是怀疑 Twitter 的 Tweet 按钮的设计目标是“我们要让这个傻瓜变笨，我们只会让这些动物选择一个数据文本值——每个 Tweet 按钮都必须有一个硬编码，”一旦-on-the-page" data-text 属性 - 如果他们尝试动态更改 Tweet 按钮的 data-text 属性，他们就会开玩笑。"

我需要让它工作——有什么想法吗？

4

4 回答 4

3

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

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

$("#someIDiKnow a").attr("data-text", "Replacement Text!");
于 2012-10-17T14:28:12.290 回答
0

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

编辑：隐藏表单/PHP 变量解决方案已经克服了 Twitter 的 Tweet 按钮设置的障碍——我现在可以成功地根据用户的客户端输入随时动态更改 Tweet 按钮文本。根据 Domenic 的敏锐观察，上面的问题太长并且里面有代码，我将跳过在这里发布答案，我为上面的长度道歉。

于 2012-03-13T02:14:51.553 回答
0

您可以使用 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);" />
于 2012-10-13T08:14:47.780 回答
0

在 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>

我设法用javascript更改了“数据文本”

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

如果您将 id='twitter' 添加到 <a>，也可以使用 document.getElementById('twitter')

于 2015-08-27T21:23:03.370 回答