加上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
);

上面的脚本在上面的页面加载时成功选择了“男性”，但是我不确定如何同时单击多个按钮。我也要自动选择“先生”。同样，这是页面上的另一个按钮。所以最终，我希望脚本在页面加载时选择Male AND Mr.。幸运的是，它们都在“标签”中，所以我认为使用waitForKeyElements可能会很好。

不幸的是，JavaSript并不是我的操盘手，我很难找到正确的语法来实现这一目标。似乎很容易解决。

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

本质上，我所需要做的就是添加“先生”的文字。以及已经指定的“男性”。任何帮助都很棒。

Answer 1

您可以创建一个函数，在给定<span>的文本的情况下，.find设置适当的元素并单击其父元素。 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();
  }
);