单击与另一个按钮同名的带有 javascript 的按钮答案

【问题标题】：click a button with javascript which has same name as another button单击与另一个按钮同名的带有 javascript 的按钮
【发布时间】：2021-06-10 14:22:38
【问题描述】：

我正在尝试使用 Javascript 在 Chrome 扩展程序中编写自动点击器，但是使用特殊类型的按钮。

这里有 2 个按钮示例：

<button ng-bind-html="option.value" type="button" tabindex="15" ng-click="optionClickHandler(option)" ng-disabled="formFieldModel.disabled || isOptionDisabled(option) || showSpinner" ng-class="{ 'selected': option &amp;&amp; formFieldModel &amp;&amp; option.id === formFieldModel.eventExtraFieldValueId, 'disabled': isOptionDisabled(option) }" class="ng-binding selected">The App</button>

和

<button ng-bind-html="option.value" type="button" tabindex="15" ng-click="optionClickHandler(option)" ng-disabled="formFieldModel.disabled || isOptionDisabled(option) || showSpinner" ng-class="{ 'selected': option &amp;&amp; formFieldModel &amp;&amp; option.id === formFieldModel.eventExtraFieldValueId, 'disabled': isOptionDisabled(option) }" class="ng-binding">NTC App</button>

当两者都显示在页面上时，如何单击其中一个？谢谢。

【问题讨论】：

找出元素之间的差异并选择您想要的特定按钮。例如他们的文本，或唯一的父元素。问题中没有足够有用的信息来提供任何进一步的帮助
document.querySelector('[ng-bind-html="option.value"]').click() 如何在该命令的按钮中指定文本？
如果它们的顺序始终相同，您基本上可以使用$("button").eq(1).click() 来单击第二个 - 添加其他属性，即使它们相同以限制为 2 个按钮
谢谢你的回答，但是如果我想指定一个特定的按钮，因为显示的字符串？

标签： javascript jquery google-chrome google-chrome-extension

【解决方案1】：

如果你使用 jQuery

$('button:contains("The App")').click()

否则

Array.from(document.querySelectorAll('button'))
  .filter(s => s.innerText === "The App")
  .forEach(s => s.click())

【讨论】：

感谢您的回答，当我执行 document.getallelementbyTagName('button') 时，所有按钮都以这种方式显示：button.ng-binding、button.ng-binding、button.ng-binding、 button.ng-binding，button.ng-binding，button.ng-binding，button.ng-binding，button.ng-binding，所以这就是为什么它不点击
@Mehditation 请在上面使用 document.querySelectorAll 查看我编辑的答案
如果你使用 jQuery - 如果你不使用 jquery，那么不要用jquery标记你的问题...
谢谢，还是不行，在这个网页（nike.com/events-registration/event?id=1618516799261）上试试，但是把字符串改成“Twitter”，我就不行了。
@Mehditation 它有效，我使用 jQuery 版本进行了测试，但是 Twitter 按钮隐藏在您不可见的 <div ng-show="userData.loggedIn" class="ng-hide"> 父级中。

【解决方案2】：

据我所知，按钮之间的唯一区别是类。您可以像这样选择具有特定类的按钮：

$("button.ng-binding")

【讨论】：

对不起是我选错了按钮！
反对票不是我的，但请注意两个按钮元素都有这个类。