使用javascript动态设置按钮“data-text”的内容，或者..？

这是在显示Tweet按钮的窗体上运行的代码 - 显示多个图像的窗体上的按钮 - 当用户单击其中一个图像时，它会变成“选定”图像，Tweet按钮应该是鸣叫所选图像的名称和网址：使用javascript动态设置按钮“data-text”的内容，或者..？

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

我需要动态改变“数据文本”属性的值在鸣叫按钮是所选图像的名称。我添加高于该fails--从这里的代码所获得的“ELEM”的JavaScript代码：

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

为空（我想），因为这线在上述的Twitter鸣叫按钮的代码的：

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

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

你会看到，我添加了ID =“tweetBtnId”到鸣叫按钮的上方，我能得到访问我的图像选择鸣叫按钮的onclick（）处理上面，然后设置“数据 - 文本'到刚刚选择的图像的名称。

我只是怀疑Twitter的Tweet按钮的设计目标是“我们要愚弄这个吸盘，我们只会让这些动物选择一个数据文本值 - 每个Tweet按钮必须有一个硬盘 - 如果他们尝试动态更改“Tweet”按钮的数据文本属性，则会在页面上显示“一次写入”的数据文本属性 - 笑话。“

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

来源

2012-03-13 wantTheBest

只是萤火证实 - 鸣叫按钮的ID是“B”，甚至没有一个数。那么Twitter脚本不会让你很容易getElementById（）。 – wantTheBest 2012-03-13 01:04:06

哇，我可以听到窗外打鼾的蜗牛。今天安静在这里。一种超级解决方法是创建一个带有一个隐藏字段的窗体，并在用户单击图像时调用的onclick（）处理程序中对其执行form.submit（）。然后，我可以设置一个名为“选定图像”的PHP变量并将其重定向回原始页面，并使用PHP变量作为Tweet按钮的“数据文本”部分，这样当用户发送PHP变量将所选图像的名称分配给推文按钮中的“数据文本”。一个服务器的往返推文！ DAGNABBIT。 – wantTheBest 2012-03-13 01:31:31

没有人回答这个问题的原因是因为它太长而且充满代码，可能与实际的核心问题无关。 – Domenic 2012-03-13 02:17:50

看起来现在会是隐藏的表单/ php变量方法 - 如果我找到更好的解决方法，我会回复。

编辑：隐藏形式/ PHP可变解决方案击败了Twitter的Tweet按钮所带来的障碍 - 我现在可以成功地根据用户的客户端输入随时动态更改Tweet按钮文本。 Per Domenic对上述问题的精明观察太长，并且有代码，我不会在这里发布答案，我对上面的长度表示歉意。

来源

2012-03-13 02:14:51 wantTheBest

您可以使用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-13 08:14:47 TheRocketSurgeon

他遇到的问题是'＃tweetBtnId'没有找到按钮！ – Stobor 2012-10-18 00:41:30

更新我的代码以使用PhonicUK的建议。那是一个好主意！ – TheRocketSurgeon 2012-10-20 23:36:24

只是把它放在一个容器具有已知ID并遍历与它的文件：使用HTML

3210

我管理

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

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

来源

2012-10-17 14:28:12 PhonicUK

这对我不起作用，我很肯定你必须在之后以某种方式重新加载twitter脚本。 – jovan 2014-04-07 10:15:06

用javascript改变'data-text'

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

还通过document.getElementById（“叽叽喳喳”）的工作，如果你加入ID =“叽叽喳喳”到<一个>

来源

2015-08-27 21:23:03 warkentien2

使用javascript动态设置按钮“data-text”的内容，或者..？

回答

相关问题