使用 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 动态设置推文按钮“数据文本”内容,或者..? 的相关文章

  • ReferenceError:regeneratorRuntime未定义(但在范围内工作)

    我遇到过这种奇怪的情况 ReferenceError regeneratorRuntime is not defined 我已经设法在一个非常小的设置中重现 与同一问题上的类似问题相比 并且还注意到一些奇怪的行为 具体取决于是否使用范围 以
  • 为什么我的淘汰单选按钮在另一个具有点击绑定的元素内时会失败?

    我有一个单选按钮列表 我想要点击 li 他们还检查单选按钮 这一切都有效 直到我放了一个name单选元素上的属性 然后我的代码停止工作 我的代码如下所示 ul li li ul li
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • 如何使用javascript将大图像转换为十六进制?

    如果我尝试将图像转换为十六进制 无论我使用哪个函数 我都会收到此错误消息 该图像的大小为 7 MB 19812 毫秒 清理 1401 2 1455 0 gt 1401 2 1455 0 MB 9 9 0 ms 自上次 GC 以来 8 3 m
  • 如何格式化 Highcharts 的 (x,y) 对数据的日期时间

    我的序列化方法会产生如下所示的日期时间字符串 2014 07 09T12 30 41Z 为什么下面的代码不起作用 function container highcharts xAxis type datetime series data x
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening

随机推荐

  • 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