仅当站点没有按钮 B 时才查询 select 或 select 按钮 A

Question

我正在创建一个 Chrome 浏览器扩展程序，它会在某些按钮出现时自动点击它们。我正在使用 arrive.js 进行监视，它使用查询选择器来监视要单击的 html 元素。

var buttonA = 'a[data-test="begin-session-button"]'
var buttonB = 'a[data-test="skill-header-practice-button"]'

document.arrive(buttonA, function () {
  document.querySelector(buttonA).click();
});

document.arrive(buttonB, function () {
  document.querySelector(buttonB).click();
});

我遇到的问题是有些站点同时具有 buttonA 和 buttonB 按钮。截至目前，这两个按钮都会被点击，最后点击哪个按钮是运气问题。

只要有 buttonA 和 buttonB 的站点，只需单击 buttonA。所以我想改变 buttonB 的查询，例如：

document.arrive(buttonB + ' :not:' + buttonA, function () {
  document.querySelector(buttonB).click();
});

作为 Chrome 浏览器控制台中的查询，它看起来像：

document.querySelector(
   'a[data-test="skill-header-practice-button] ' + 
   ':not:a[data-test="begin-session-button"]'
)

这是错误的语法，在 chrome 浏览器控制台中不起作用。正确的语法是什么样的？

Answer 1

你能不能别这样

document.arrive(buttonA, function () {
  document.querySelector(buttonA).click();
});

document.arrive(buttonB, function () {
  if(document.querySelector(buttonA) == null){
    document.querySelector(buttonB).click();
  }
});

我不能说我以前使用过 arrive 库，所以我可能完全错了

Answer 2

我想这样做 "programatically" 比使用复杂的选择器更简单，比如（适用于您的代码，因为 buttonA 是全局的，请注意函数必须可以访问此变量):

var buttonA = 'a[data-test="begin-session-button"]'
var buttonB = 'a[data-test="skill-header-practice-button"]'

document.arrive(buttonA, function () {
  document.querySelector(buttonA).click();
});

document.arrive(buttonB, function () {
  var buttA = document.querySelector(buttonA);
  if(buttA === null){
    document.querySelector(buttonB).click();
  }
});

仅当站点没有按钮 B 时才查询 select 或 select 按钮 A

Query selector to select Button A only if site does not have Button B

html

javascript

jquery-selectors