通过添加 waitForKeyElements 自动单击多个按钮

Question

我一直在寻找一种方法来自动选择包含不同网站上特定单词的调查表单按钮。我在 Google Chrome 中使用 Tampermonkey 来实现这一点。在这种情况下，我想自动选择带有“男”和“先生”字样的按钮。在他们里面。

这是我正在谈论的按钮类型的示例（包括 CSS/HTML）：

我目前在Tampermonkey中使用如下代码来实现按压效果：

// ==UserScript==
// @name         Male Test 3
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://tasupport.co1.qualtrics.com/jfe/form/SV_0qez6NHJGoCAmMt
// @match        https://tasupport.co1.qualtrics.com/jfe2/form/SV_0qez6NHJGoCAmMt/next?rand=775440350&tid=1&t=1547858208474
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// ==/UserScript==

const fire = () => Array.from(document.querySelectorAll('label > span')).find(e => e.textContent === 'Male').parentElement.click();

waitForKeyElements (
    "label",
    fire
);

上述脚本在上述网站的页面加载时成功选择了“男性”，但我不确定如何同时点击多个按钮。我还想自动选择“先生”。同样，这是页面上的另一个按钮。所以最终，我希望脚本在页面加载时选择男性和先生。幸运的是，它们都在“标签”内，所以我认为 waitForKeyElements 可能没问题。

不幸的是，JavaSript 不是我的驾驶室，我很难找到正确的语法来实现这一点。这似乎很容易解决。

我尝试了find(e => e.textContent === 'Male', 'Mr.') 之类的方法，但无济于事。

基本上，我需要做的就是包含“先生”的文字连同已经指定的“男性”。任何和所有的帮助都会很棒。

Answer 1

您可以创建一个函数，给定 <span> 的要查找的文本，.finds 适当的元素并单击其父元素。一旦waitForKeyElements 触发，使用Male 和Mr. 调用该函数：

const findAndClickParent = text => [...document.querySelectorAll('label > span')]
  .find(e => e.textContent === text)
  .parentElement
  .click();

waitForKeyElements (
  "label",
  () => {
    findAndClickParent('Male');
    findAndClickParent('Mr.');
  }
);

如果您想提高效率，可以在回调触发时创建那些匹配元素的对象（假设您不关心重叠），并每次访问适当的属性，例如：

waitForKeyElements (
  "label",
  () => {
    const parentsByTextContent = Array.prototype.reduce.call(
      document.querySelectorAll('label > span'),
      (a, e) => {
        a[e.textContent] = e.parentElement;
        return a;
      },
      {}
    );
    parentsByTextContent['Male'].click();
    parentsByTextContent['Mr.'].click();
  }
);