使用 javascript 动态设置 Tweet 按钮“数据文本"内容,或者..? [英] set Tweet button 'data-text' contents dynamically with javascript, or..?

查看:30
本文介绍了使用 javascript 动态设置 Tweet 按钮“数据文本"内容,或者..?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以下是显示 Tweet 按钮的表单上的功能代码 - 该按钮位于显示多张图像的表单上 - 当用户单击其中一张图像时,它成为选定"图像,并且推文按钮应该推特所选图片的名称和网址:

Here is functioning code on a form that displays a Tweet button -- the button's on a form that displays several images -- when the user clicks one of the images, it becomes the 'selected' image and the Tweet button is supposed to tweet the selected image's name and url:

      <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() 处理程序需要更新推文按钮的数据文本"带有刚刚选择的图像名称的属性:

I have an 'onclick()' handler for the div that displays the image. When the user clicks one of the images, its div's onclick() handler is called and sets that image to be the 'currentlySelectedImage' on the page -- and the onclick() handler then needs to update the Tweet button's 'data-text' attribute with the name of the just-selected image:

          // 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":

I need to dynamically change the 'data-text' attribute's value in the Tweet button to be the name of the selected image. I added the javascript code above which fails-- the 'elem' obtained from the code here:

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

为空(我认为),因为上面 Twitter 推文按钮代码中的这一行:

is null (I think) because of this line in the Twitter tweet button code above:

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

我不确定,但看起来 Twitter Tweet 按钮默认脚本会覆盖任何尝试向推文按钮添加id"属性.

I'm not sure but it looks like the Twitter Tweet button default script overwrites any attempt to add an 'id' attribute to the Tweet button.

您会看到我将 id="tweetBtnId" 添加到上面的 Tweet 按钮,以便我可以访问上面图像选择 onclick() 处理程序中的 Tweet 按钮,然后设置'data-text' 到刚刚选择的图像的名称.

You will see that I added the id="tweetBtnId" to the Tweet button above so I could get access to the Tweet button in my image-selection onclick() handler above, then set the 'data-text' to the name of the just-selected image.

我只是怀疑 Twitter 的推文按钮的设计目标是我们要让这个傻瓜变得愚蠢,我们只会让这些动物选择一个数据文本值——每个推文按钮都必须有一个硬编码, Once-on-the-page"数据文本属性 - 如果他们试图动态更改推文按钮的数据文本属性,他们就会开玩笑."

I just doubt that Twitter's design goal for the Tweet button was "we're gonna dumb this sucker WAY down, we'll only let these animals choose ONE data-text value - every Tweet button has to have one hard-coded, "Once-on-the-page" data-text attribute - joke's on them if they try to dynamically change the Tweet button's data-text attribute."

我需要让它发挥作用——有什么想法吗?

I need to get this to work -- any ideas?

推荐答案

目前看来这将是笨拙的隐藏表单/php 变量方法——如果我找到更好的解决方法,我会回帖.

Looks like it's going to be the kludgy hidden form/php variable approach for now -- I'll post back if I find a better work-around.

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

the hidden-form/PHP variable solution has beaten the roadblock put up by Twitter's Tweet button -- I can now successfully, dynamically change the Tweet button text at will, anytime based on the user's client-side input. Per Domenic's astute observation that the question above is too long and has code in it, I'll skip posting the answer here, and I apologize for the length above.

这篇关于使用 javascript 动态设置 Tweet 按钮“数据文本"内容,或者..?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆