使用 JavaScript 动态设置推文按钮“数据文本”内容,或者..?

2024-04-02

下面是一个显示推文按钮的表单上的功能代码——该按钮位于显示多个图像的表单上——当用户单击其中一个图像时,它会成为“选定”图像,并且推文按钮应该发布推文所选图像的名称和网址:

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

我需要动态地将推文按钮中的“数据文本”属性值更改为所选图像的名称。我添加了上面失败的 javascript 代码——从此处的代码获得的“elem”:

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

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

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

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

你会看到我添加了id=“tweetBtnId”到上面的推文按钮,这样我就可以访问上面的图像选择 onclick() 处理程序中的推文按钮,然后设置'数据文本'到刚刚选择的图像的名称。

我只是怀疑 Twitter 对“推文”按钮的设计目标是“我们要让这个笨蛋变得愚蠢,我们只会让这些动物选择一个数据文本值 - 每个推文按钮都必须有一个硬编码,“一旦-on-the-page”数据文本属性 - 如果他们尝试动态更改推文按钮的数据文本属性,他们就会笑话他们。”

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


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

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

$("#someIDiKnow a").attr("data-text", "Replacement Text!");
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 JavaScript 动态设置推文按钮“数据文本”内容,或者..? 的相关文章

  • 如何从ArrayBuffer中获取二进制字符串?

    JavaScript中如何从ArrayBuffer中获取二进制字符串 我不想对字节进行编码 只需将二进制表示形式获取为字符串 提前致谢 以下代码将一致地转换ArrayBuffer to a String并再次返回 而不会丢失或添加任何额外的
  • browserify 错误 /usr/bin/env: 节点: 没有这样的文件或目录

    我通过 apt get install 安装了 node js 和 npm 以及所有依赖项 然后安装了 browserify npm install browserify g 它完成了整个过程 看起来安装正确 但是当我尝试为此做一个简单的捆
  • 最小的 ExtJS 包是什么?

    有谁知道 Ext JS 2 2 所需的最少文件吗 我知道 ExtJS 网站有一个功能 build http extjs com products extjs build ExtJS ext js 的小版本 作为 ext all js 的替代
  • ExtJS 4:克隆商店

    我正在尝试找出如何克隆Ext data Store不保留旧的参考 让我用一些代码更好地解释一下 这是源商店 var source Ext create Ext data Store fields name age data name foo
  • React延迟加载/无限滚动解决方案

    我花了一段时间才弄清楚如何使用优秀的延迟加载图像React Lazyload 组件 https github com jasonslyvia react lazyload 演示在滚动时延迟加载图像 但在测试时我无法获得相同的行为 罪魁祸首是
  • 如何从 URL 字符串中删除某些参数?

    我有这个var存储表示充满参数的 URL 的字符串 我正在使用 AngularJS 我不确定是否有任何有用的模块 或者可能使用纯 JavaScript 来删除不需要的 URL 参数而无需使用正则表达式 例如我需要删除 month 05并且
  • History.replaceState 仍然向“浏览历史记录”添加条目

    具体来说 调用以下代码片段 history replaceState undefined undefined value 正确地不会影响当前页面的后退按钮行为 但是will在 浏览历史记录 页面添加一个条目 这是我不想要的 下图是 Chro
  • 如何获取数组中最后 5 个元素(不包括第一个元素)?

    在 JavaScript 数组中 如何获取最后 5 个元素 排除第一个元素 1 55 77 88 would return 55 77 88 添加其他示例 1 55 77 88 99 22 33 44 would return 88 99
  • NodeJS 无法加载 css 文件

    所以我正在尝试制作一个 NodeJS 服务器 并且我尝试保留尽可能少的附加组件 但是 我遇到了一个问题 我似乎无法加载任何内容CSS我调用的文件HTML文件 该调用似乎确实由服务器处理 但它不会显示在浏览器中 My 网络服务器 js fil
  • 使用 ES6 模块导出/导入单个类方法?

    假设我有一个像这样的简单课程fileA js class foo constructor x this name x fooMethod x return x hello 我想导入并使用fooMethod in fileB js像这样 im
  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我
  • 用于导出到 CSV/Excel 的数据 URI(无服务器端请求):浏览器支持/限制?

    以下问题 Javascript 或 Flash 导出至 CSV Excel https stackoverflow com questions 8150516 javascript or flash export to csv excel
  • 对数字和字母元素的数组进行排序(自然排序)

    假设我有一个数组 var arr 1 5 ahsldk 10 55 3 2 7 8 1 2 75 abc huds 我尝试对其进行排序 我得到了类似的东西 1 1 10 2 2 3 5 55 7 75 8 abc ahsldk huds 注
  • Web浏览器控件:如何捕获文档事件?

    我正在使用 WPF 的 WebBrowser 控件加载一个简单的网页 在这个页面上我有一个锚点或一个按钮 我想在我的应用程序后面的代码中 即在 C 中 捕获该按钮的单击事件 WebBrowser 控件是否有办法捕获加载页面元素上的单击事件
  • 全局定义的 AngularJS 控制器和封装

    根据 AngularJS 的教程 控制器函数仅位于全局范围内 http docs angularjs org tutorial step 04 http docs angularjs org tutorial step 04 控制器函数本身
  • 比较 javascript 元素和 scala 变量的 Play 框架 Twirl 模板

    如下面的代码示例所示 我想比较 scala 辅助元素内的 javascript 元素 然而 即使存在元素 abcde 它也始终返回 false 除了使用标签之外 如何获取 scala 辅助元素内的 javascript 值 appSeq S
  • 如何为 ng-repeat orderBy 创建回调?

    寻找一种方法让 AngularJS 的 ng repeat orderBy 过滤器在完成渲染后执行回调 Markup div table thead tr th Name th th Age th tr thead tbody tr tr
  • 盒式捆绑包与 MVC4 捆绑包

    我目前正在开发一个原型 ASP NET MVC 3 解决方案 该解决方案将用作多个项目重写的基础 来自 Web 表单 我的目标之一是跨应用程序实现一些脚本管理 而不是我们目前没有的目标 MVC 3有一个缺陷恕我直言 如果您需要在部分视图或模
  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo
  • 使用 Devise 和 Rails 从 Twitter Oauth 获取电子邮件

    我已经设置了一个基本的 Rails 应用程序来使用 twitter oauth gem 和设计 并且已经能够登录用户 但是 我的问题是我现在已将我的应用程序列入白名单 并且我想在响应中收到用户的电子邮件 我已遵循 Twitter 端的所有必

随机推荐

  • Rails 运行脚本不工作

    任何想法为什么这不起作用 我得到一个NoMethodError当我尝试通过运行下面的代码时rails runner 也许我错误地调用了 Rails 运行程序 抱歉 Rails 新手 文件位置 app scripts data import
  • 如何使用鼠标滚轮在 tmux 面板中启用滚动? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 需要使用鼠标滚轮在 tmux 窗格中启用滚动 我怎样才能得到这些提示 我可以使用它 当然如果它存在的话 鼠标选择窗格打开 option 原
  • 如何将 Windows 身份验证与 SQL Server docker 容器一起使用

    我已经浏览了我可以在网上找到的用于构建基于 docker 容器的应用程序的所有示例 我想在两个 docker 容器中运行两个服务 运行 ASP NET 的 Windows 容器 运行 SQL Server 的 Windows 容器 简单的工
  • 在 Firefox 中单击“后退”按钮,在访问时重新加载页面

    我有一个页面 它可以将整个身体从观看者的屏幕上动画出来作为过渡 它工作正常 但是当用户单击浏览器中的后退按钮时 Firefox 会从历史记录中调出没有正文的缓存页面 因此 当我通过后退按钮访问时重新加载页面对我来说非常简单 我尝试了以下代码
  • 我将把“Public static void main(String[] args)”放在哪里?

    几天前我开始编写java代码 我制作了一些成功的程序 但我坚持这个 无论我在哪里编写 Public static void main String args 代码 我都会收到错误 大多数时候它告诉我 是期待 我知道把 该代码前面是错误的 有
  • 如何修复“导入错误:无法导入名称 IncompleteRead”?

    当我尝试安装任何东西时pip or pip3 I get sudo pip3 install python3 tk Traceback most recent call last File usr bin pip3 line 9 in
  • Asp.net - MVC1 与 MVC2

    任何人都可以准确解释 ASP NET MVC1 与 MVC2 之间的区别 如果我在 MVC1 中有一个项目 我如何将其迁移到 MVC2 MVC 2 是同一库的更高版本 要升级到它 请阅读这一页 http www asp net learn
  • RecyclerView 预测项目动画不起作用(出现)

    我有一个带有 GridLayoutManager 的 RecyclerView 支持 lib v7 我更新适配器并进行notifyItemMoved 如果项目源位置在屏幕上并且目标位置也在屏幕上 则播放 移动动画 如果该项目位于屏幕外的位置
  • ArgumentNullException - 获取 AzureService

    我正在尝试使用 Windows Azure PowerShell 模块来管理订阅 我已经下载了我的证书 publishsettings 文件 并将其导入Import AzurePublishSettingsFile然后我选择了我的订阅Sel
  • 如何获取通过输入框输入的城市/国家的经度和纬度?

    我有这个代码
  • 如何在反应选择上进行for循环?

    我使用react select创建一个选择选项安装与使用 https github com JedWatson react select示例代码 有一个数组对象来存储如下选项 const options value chocolate la
  • 如何在 R 中将所有行合并为一行? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我有一个有 100 行和 10 列的数据框 我想知道如何将所有 100 行合并为一行 谢谢 mydata seq 1 1000 mydata
  • 如何在 DocPad 中缩小 HTML、CSS 和 JavaScript 文件?

    我想在点击时缩小 HTML CSS 和 JavaScript 文件docpad generate 我怎样才能做到这一点 有几种方法可以解决这个问题 最突出 最直接的方法就是修改你的文档垫配置文件 http bevry me docpad c
  • iPad 上的 YouTube 嵌入代码

    我正在努力通过添加 iPad 支持来改善网站的体验 这包括对视频的支持 我们的客户正在推动一种用于存储和提供视频的 YouTube 模型 这对我们来说太棒了 我原本计划使用 YouTube 新的 HTML5 支持来实现片段 这将设备检测任务
  • C++:计算游戏中的总帧数

    不是一个很好的标题 但我不知道该起什么名字 无论如何 我正在计算游戏中的总帧数 这样我就可以计算平均 FPS long int 万一游戏持续很长时间 我该怎么做才能确保我的long int不会增加超过其限制吗 如果超过极限会发生什么 Tha
  • 以不同数组长度绘制来自 pandas 数据帧的 3D 光谱数据

    是否有可能得到类似的东西这个情节 https www researchgate net figure 7662272 fig1 Figure 4 3D overlay zoom plot of mass spectra of a serum
  • glUseProgram(0) 的作用是什么?

    OpenGL 文档为glUseProgram https www khronos org registry OpenGL Refpages gl4 html glUseProgram xhtml声称用参数调用它zero将导致着色器执行的结果
  • SwitchPreference默认颜色

    我正在开发的应用程序我已将主色 深色 强调色设置为我想要的颜色 并且它们出现在正确的位置 如预期 我有一个我正在使用的偏好活动 我希望该活动的颜色preferenceswitch我正在使用的 会以强调色呈现 相反 它们以材质青色呈现 我想知
  • 为什么 JUnit 5 默认访问修饰符更改为 package-private

    为什么 JUnit 5 中的默认访问修饰符是包私有的 JUnit 4 中的测试必须是公开的 改成package private有什么好处 为什么 JUnit 5 中的默认访问修饰符是包私有的 这不是 默认 从技术上讲 没有默认值 相反 在
  • 使用 JavaScript 动态设置推文按钮“数据文本”内容,或者..?

    下面是一个显示推文按钮的表单上的功能代码 该按钮位于显示多个图像的表单上 当用户单击其中一个图像时 它会成为 选定 图像 并且推文按钮应该发布推文所选图像的名称和网址 a href https twitter com share class