如何点击‘Chest unlocked’弹窗中class为btn btn-default的按钮

嘿，这个问题很好解决，关键就是精准定位和“Chest unlocked”绑定的那些按钮，而不是一股脑点所有同class的。下面给你几种实用的实现方案，你可以根据自己页面的HTML结构来选：

我们可以遍历所有目标按钮，然后检查它和“Chest unlocked”文本的关联关系，常见的几种情况对应不同的判断逻辑：

情况1：按钮自身包含“Chest unlocked”文本 #

如果按钮上直接显示了这段文字，用这段代码：

function clickChestButtons() {
  // 获取所有class为btn btn-default的按钮
  const targetButtons = document.querySelectorAll('.btn.btn-default');
  
  targetButtons.forEach(button => {
    // 检查按钮文本里是否包含目标内容
    if (button.textContent.trim().includes('Chest unlocked')) {
      button.click();
    }
  });
}

// 调用函数执行点击
clickChestButtons();

情况2：文本在按钮的父容器里 #

比如按钮和“Chest unlocked”文本在同一个div/容器内，就检查父元素的文本：

function clickChestButtons() {
  const targetButtons = document.querySelectorAll('.btn.btn-default');
  
  targetButtons.forEach(button => {
    if (button.parentElement.textContent.trim().includes('Chest unlocked')) {
      button.click();
    }
  });
}

clickChestButtons();

情况3：文本是按钮的兄弟元素 #

如果“Chest unlocked”在按钮的前一个或后一个标签里，比如旁边的span/p标签，就检查兄弟元素：

function clickChestButtons() {
  const targetButtons = document.querySelectorAll('.btn.btn-default');
  
  targetButtons.forEach(button => {
    const prevSibling = button.previousElementSibling;
    const nextSibling = button.nextElementSibling;
    // 检查前后兄弟元素是否包含目标文本
    if ((prevSibling && prevSibling.textContent.trim().includes('Chest unlocked')) ||
        (nextSibling && nextSibling.textContent.trim().includes('Chest unlocked'))) {
      button.click();
    }
  });
}

clickChestButtons();

如果你的项目已经引入了jQuery，代码会更简洁，同样对应不同场景：

情况1：按钮自身包含目标文本 #

function clickChestButtons() {
  // 直接筛选包含目标文本的按钮并点击
  $('.btn.btn-default:contains("Chest unlocked")').click();
}

clickChestButtons();

情况2：文本在按钮的父容器里 #

function clickChestButtons() {
  $('.btn.btn-default').filter(function() {
    // 检查父元素文本是否包含目标内容
    return $(this).parent().text().trim().includes('Chest unlocked');
  }).click();
}

clickChestButtons();

情况3：文本在按钮的兄弟元素里 #

function clickChestButtons() {
  $('.btn.btn-default').filter(function() {
    // 检查所有兄弟元素的文本
    return $(this).siblings().text().trim().includes('Chest unlocked');
  }).click();
}

clickChestButtons();

假设你的HTML结构是这样的（按钮和文本在同一个专属容器里）：

<div class="chest-item">
  <p>Chest unlocked</p>
  <button class="btn btn-default">Claim Reward</button>
</div>

那可以直接定位这个容器下的按钮，完全避免误点：

// 原生JS
document.querySelectorAll('.chest-item:has(p:contains("Chest unlocked")) .btn.btn-default')
  .forEach(btn => btn.click());

// jQuery
$('.chest-item:has(p:contains("Chest unlocked")) .btn.btn-default').click();

你可以根据自己页面实际的HTML结构，调整上面的判断逻辑，就能精准点击和“Chest unlocked”相关的按钮啦。

内容的提问来源于stack exchange，提问作者Leandro Campos