仅当站点没有按钮 B 时查询选择器以选择按钮 A答案

【问题标题】：Query selector to select Button A only if site does not have Button B仅当站点没有按钮 B 时查询选择器以选择按钮 A
【发布时间】：2017-06-15 21:17:18
【问题描述】：

我正在创建一个 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 浏览器控制台中使用。正确的语法是什么样子的？

【问题讨论】：

标签： javascript html jquery-selectors

【解决方案1】：

你能不能不做这样的事情

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

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

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

【讨论】：

【解决方案2】：

我想这比使用复杂的选择器更容易“以编程方式”完成，例如（使用您的代码，因为 buttonA 是全局的，请注意该函数必须可以访问此 var）：

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();
  }
});

【讨论】：