如何通过单击链接并确认弹出窗口来检查两个条件?

2024-06-07

我是 JavaScript 新手,有 2 个 html 链接:

<li><a class="dropdown-item confirm" href="#">wtdata</a></li>
<li><a class="dropdown-item confirm" href="#">ftdata</a></li>

第一步是通过单击每个链接获取特定文本值。例如,如果我单击第一个链接,我将获得文本 wtdata。如果单击第二个链接,我会收到文本 ftdata。我已经通过以下方式完成了这一步:

<script>

var myFunction = function() {
    var attribute = this.innerHTML;
    alert(attribute);
};

var elements = document.getElementsByClassName("dropdown-item");

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

</script>

单击上一步中的链接后,将自动弹出一个 Bootstrap 模式,其中有 2 个按钮。这是一个内置的Bootstrap函数,已经完成了。这些按钮是:

  <button id='cancel_btn'>Cancel</button>
  <button id='confirm_btn'>Confirm</button> 

第二步是:

如果在第一步中单击了链接 wtdata 并单击了弹出窗口中的确认按钮,则将链接 wtdata 的 href 值替换为“wtdata_url”。

与链接 ftdata 相同,如果 在第一步中单击链接 ftdata 并单击弹出窗口中的确认按钮,将链接 ftdata 的 href 值替换为“ftdata_url”。

如何完成第二步?我尝试构建一个函数来返回已单击的特定文本,但无法获取返回值:

 <script>       
    function getLinkname(cl){
    var elements = document.getElementsByClassName(cl);
    var getText = function() {
    var attribute = this.innerHTML;
    document.getElementById("staticBackdropLabel").innerHTML='Run ' + attribute + ' ?';
    

};
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', getText, false);
}
return attribute;
    }

    var linkname = getLinkname('confirm');
    console.log(linkname);

  </script>

error:

Uncaught ReferenceError: attribute is not defined
    at getLinkname ((index):159:1)

我写的这个例子是基于我对你的问题的理解。

  • 我用id属性,因为这是一种简单的方法。
  • 如果你想改变innerText<a/> tag 动态地,更好的方法是生产你的<ul/>JavaScript 的链接列表。
function clickATag (e) {
  document.getElementById('input').value = e.innerText
  document.getElementById('aTagId').innerText = e.id
  
  var myModal = getMyModal();
  myModal.show()
}

function clickButton (e) {
  const aTagId = document.getElementById('aTagId').innerText;
  const a = document.getElementById(aTagId);
  a.innerText = document.getElementById("input").value;
  
  const result = document.getElementById('result');
  result.innerText = "new url: " + document.getElementById("input").value;
}

function getMyModal () {
  var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
  })
  
  return myModal;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/js/bootstrap.bundle.min.js"></script>

<ul>
<li><a id="a1" class="dropdown-item confirm" href="#" onclick="clickATag(this)">wtdata</a></li>
<li><a id="a2" class="dropdown-item confirm" href="#" onclick="clickATag(this)">ftdata</a></li>
</ul>

<div id="myModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <input id="input" />
        <p id="result">new url:</p>
        <p id="aTagId" hidden></p>
        <p>Buttons</p>
        <button id='cancel_btn' type="button" class="btn btn-primary" onclick="clickButton(this)">Confirm</button>
        <button id='confirm_btn' type="button" class="btn btn-secondary">Cancel</button> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过单击链接并确认弹出窗口来检查两个条件? 的相关文章

  • JavaScript 阻止表单提交

    当我按下 JavaScript 对话框上的取消按钮时 我试图让我的表单不提交 我有这个代码 document ready function submit click function e e preventDefault var link
  • GWT - 找不到入口点类

    我最近开始开发另一个 GWT 模块 因此 我创建了一个包 其中包含所有新类和一个实现新入口点的特定类 我将 gwt xml 修改为新的入口点 当我编译时 出现以下错误 GWT Compiling client side code WARNI
  • 如何解决:console.error:“redux-persist 无法创建同步存储。回退到“noop”存储

    我正在尝试在 React Native 应用程序中设置 redux persist 但是我遇到了这个错误 console error redux persist 无法创建同步存储 下降 返回 noop 存储 我尝试将 src redux i
  • php curl 获取 html 和 js 渲染

    php curl 只获取html页面的源代码 不执行js脚本 我需要我的网站获取已执行所有 JavaScript 的源代码 我使用ajax 但无法在页面中添加更多js 因为当我加载另一个页面时脚本会保留 我找到了 SpiderMonkey
  • 两行标题的填充

    这有点难以解释 如果有人知道更好的标题 请继续更改它 我想在标题后面画一个黑框 我正在使用 h 标签内的跨度来执行此操作 它需要向左和向右一点填充 我的布局是响应式的 因此标题可能会分成两行 div class headline black
  • 如何在javascript中使用MD5传输密码

    我弹出一个 jquery 对话框模式框用于登录我的网站 当用户单击登录时 它会向 login php 文件发出一个 post 请求 如下所示 post includes login php user username pass passwo
  • 我应该担心 JavaScript 支持吗?

    我开发了一个支持ajax 的网站 然而 该网站目前无法在没有 JavaScript 的情况下运行 该网站在我测试过的任何浏览器以及 iPhone 诺基亚手机上都运行良好 但是 我还应该担心 javascript 支持吗 我知道有一些技术可以
  • Node-Webkit在不同窗口启动功能

    我的 node webkit 应用程序由一个控制窗口和一个演示窗口组成 控制窗口收集数据并最终通过window open功能 演示文稿窗口现在可以访问global多变的 现在我想通过创建 SVG 元素等来呈现该信息的图形表示 我已经有一个
  • 在 firefox-extension 的新选项卡中打开链接

    我开发了一个网络应用程序来将其用作 Firefox 扩展 在 Firefox 中 我将它包含在 iframe 中 如下所示 现在我想在我的应用程序中有一些传出链接 如果我只使用普通的链接标记 例如 a href http mywebapp
  • 如何在新窗口中获取dom元素?

    JavaScript 中的一个简单任务是打开一个新窗口并在其中写入 但我需要在一个dom元素中写入一个带有ID的div var novoForm window open somform html wFormx width 800 heigh
  • 使用 SVG 的部分边框/描边

    我正在使用 svg d3 创建由 矩形 元素组成的图表 为每个矩形添加部分边框 描边 仅在矩形顶部 的最佳方法是什么 Thanks 我不认为 SVG 支持仅描边矩形或路径的一部分 描边不像 CSS 边框 您还有其他一些选择 所有这些都需要一
  • HTML 文本和密码输入字段的大小不同 Internet Explorer

    我正在为我的登录表单使用此表单设置 tr td class label Username td td td tr
  • Webpack - devtool:CSS 的源映射和 JS 的 eval-source-map?

    如果我使用 devtool source map 它与 CSS 配合得很好 但是 我的 JavaScript 变量名并不有趣 所以 如果我使用 devtool eval source maps 生活很美好 调试 JS 但我的 CSS 然后指
  • 有没有可靠的方法在 IE11 中使用 ctx.drawImage() ?

    我有一个脚本 可以根据数据查询创建动态 SVG 图形 我需要将它们粘贴到 PDF 中 为此我使用 jsPDF 不幸的是 jsPDF 自己的 addSVG 似乎不起作用 所以我花了一些时间尝试使用画布将 SVG 转换为 PNG 我似乎可以将
  • 获取此 contenteditable 元素中的当前行和行索引?

    我有一个这样的元素 span line 1 line 2 line 3 line 4 line 5 span 假设用户正在编辑 第 4 行 如何获取该 contenteditable 元素中的当前行和行索引 在插入符号位置 这是使用选择属性
  • 不固定高度的滚动div

    我需要构建一个动态调整大小的滚动 div div 应动态调整大小以适应屏幕 但如果内容不适合屏幕 它应该显示一个滚动条 因此浏览器自己的滚动条永远不需要激活 我可以通过在 div 中放置另一个 div 并使用来让滚动条出现在 div 中ov
  • 使页脚正确粘贴到页面底部[重复]

    这个问题在这里已经有答案了 我试图让我的页脚 只是一个带有一行文本的div 位于屏幕底部 如果内容没有一直到达底部 或者位于内容的底部 如果内容需要滚动条 如果内容不需要滚动条 它可以完美工作 但是当内容太长时 页脚仍然位于同一位置 位于内
  • WEBP图像回退

    我在互联网上搜索了很多 找不到可以完整教授的正确示例或完整教程 所以请大家给我推荐一些好的例子 我已经在很多网站上尝试过 WEBP 代码 例如与现代化工具一起使用 检查浏览器支持或使用背景图像 有一篇关于 Stucox 的文章 您可以在其中
  • 在 javascript/jquery 中从 JSON 中删除元素

    我在 javascript 中从 JSON 对象删除数据时遇到问题 我正在动态创建此 JSON 并且删除也将动态进行 下面是我的 JSON 和我所处的情况 brands 51 2046 53 67 64 现在 我必须从中删除 53 我正在使
  • 如何构建我的 PHP 项目?

    我即将开始另一个大型 PHP 项目 这次 我打算让项目文件夹变得整洁 所以我有几个关于保持我的项目干净和干燥的问题 如何区分 PHP 源文件和浏览器应访问的 PHP 文件 换句话说 我如何清楚哪些 PHP 文件提供输出 哪些提供函数或类定义

随机推荐

  • Pandas 在列级别连接数据帧时添加键

    根据 Pandas 0 19 2 文档 我可以提供keys参数来创建结果多索引 DataFrame 一个例子 来自 pandas 文档 是 result pd concat frames keys x y z 我将如何连接数据框以便我可以在
  • 终端从包含空格的变量传递参数

    在终端中如何将包含空格的字符串作为参数传递 它实际上跳过了空格后面的部分 只取第一个单词 word soccer ball shell exec casperjs test js word word 那么我怎样才能转义空白它只运行这个命令
  • g++、colorgcc 和 ccache

    尝试结合 ccache 和 colorgcc 下列的链接文本 http wiki tudos org Gcc stack 我的 g 是到 colorgcc 的软链接 colorgccrc 包含行 g ccache usr bin g 运行
  • 我应该更喜欢 C# 中的静态方法吗

    在花了一些时间学习函数式编程之后 我越来越自然地想要使用不执行任何突变的静态方法 我有什么理由应该抑制这种本能吗 我觉得这个问题有点奇怪 因为静态方法和不执行突变的方法是方法的两个正交分类 您可以拥有可变静态方法和非可变实例方法 对我来说
  • 使用 AppleScript 单击 safari 网页按钮

    我想弄清楚如何单击网页中的按钮 例如 点击谷歌网页中的 手气不错 按钮 这是我尝试过的 tell application Safari make new document with properties URL https www goog
  • 成员初始值设定项列表和分配之间是否存在性能差异? [复制]

    这个问题在这里已经有答案了 我最近与一位朋友讨论 他们说在 C 中创建对象时使用初始化列表 而不是简单地分配数据成员 可以提高性能 为什么会这样 如果这是真的 我找到了这个页面 http www parashift com c faq in
  • 我如何请求“publish_actions”权限?

    华盛顿邮报 https www facebook com dialog permissions request app id 225771117449558 display page next https 3A 2F 2Fapps face
  • 如何在运行时找到当前函数的名称?

    在使用又大又丑的 MFC ASSERT 宏多年之后 我终于决定放弃它并创建终极的 ASSERT 宏 我可以很好地获取文件和行号 甚至失败的表达式 我可以显示一个消息框 其中包含中止 重试 取消按钮 当我按下 Retry 时 VS 调试器会跳
  • vagrant up 未运行进度状态:E_INVALIDARG VBoxManage.exe:错误:设备导入失败

    这是cmd错误 我不明白错误在哪里 我一次又一次地碰到它 无法解决它 vagrant up Bringing machine default up with virtualbox provider gt default Preparing
  • Git 中的作者和提交者有什么区别?

    我刚刚在 GitHub 上发现了以下提交 https github com felixge node formidable commit 0a0b150668daa3c6f01626d2565b898e5da12392 https gith
  • Powermockito 可以在非最终具体类中模拟最终方法吗?

    假设我有一个非最终具体类 具有如下所示的最终方法 public class ABC public final String myMethod return test test 可以嘲笑吗myMethod 调用时返回其他内容junit usi
  • 我应该使用媒体查询来定位哪些设备/推荐尺寸?

    我是响应式网页设计的新手 并且感到困惑 因为对于使用哪些媒体查询以及要定位哪些设备有不同的偏好 有标准吗 我想定位 iPhone iPad 和其他流行设备 我在网上找到了这个 Smartphones portrait and landsca
  • JQuery AJAX 使用 SOAP Web 服务 [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我一直在尝试学习 JQuery 使用 AJAX 来使用我不久前编写的 SOAP Web 服务 下面是我正在使用的代码
  • 使用 geom_abline() 和 ggplot

    我是初学者ggplot2 距离我开始试验才过去 4 天 所以 如果这个问题听起来太基本了 我深表歉意 我很感激任何指导 我已经在这个问题上苦苦挣扎了大约一个小时 我正在尝试使用geom abline 如下 p lt ggplot mpg a
  • 具有 3D 旋转功能的 CAEmitterCell

    我正在尝试使用 CAEmitterLayer 和 CAEmitterCell 重现从顶部落下的小纸片效果 到目前为止 我得到了它的 2D 动画 但是我很难让每个单元格在掉落时旋转 如何对每个粒子应用随机旋转 我尝试过 3D Transfor
  • C++中全局变量和静态成员变量动态初始化的实现

    我有一些关于执行C 中关于链接和可执行模块加载过程的变量初始化 我主要关心的是全局变量和静态成员变量的动态初始化 其中初始化过程涉及代码的执行 我正在寻找解决 Windows 和 Linux 问题的答案 我已经明白在静态初始化的情况下 编译
  • WCF 中的动态 ExpandoObject

    尝试使用枚举类型进程和动态数据的操作来 Ping Pong 我的服务 ServiceContract CallbackContract typeof iStackoverflowCallBack public interface iStac
  • jUnit 中每个 @Test 的不同拆卸

    有没有办法为 jUnit 中的每个 Test 定义不同的拆卸 Use the After注释来指示每个之后要运行的方法 Test 像这样的全套注释是 BeforeClass 首先 Tests are run Before 在每个之前 Tes
  • System.Threading._IOCompletionCallback.PerformIOCompletionCallback(...) 处的 System.AccessViolationException

    使用 Net Framework 4 我在多线程 C 代码中遇到 System AccessViolationException 即使我的所有代码都是托管代码 这可能是 Net 中的一个错误吗 因为我一直认为使用 Net 意味着无论我犯什么
  • 如何通过单击链接并确认弹出窗口来检查两个条件?

    我是 JavaScript 新手 有 2 个 html 链接 li a class dropdown item confirm href wtdata a li li a class dropdown item confirm href f