jQuery条件逻辑实现：根据指定span同级元素自动触发按钮点击

给定如下HTML结构：

<a class="item">
    <span class="item_label">BIG_1</span>
    <span class="active-high">...</span>
</a>
<a class="item">
    <span class="item_label">BIG_2</span>
    <span class="active-low">...</span>
</a>

<a class="button-high">...</a>
<a class="button-low">...</a>

需要实现以下功能：

• 找到文本为BIG_1的<span>元素，检测其同级元素的类名
• 当同级元素类为active-high时，触发.button-high的点击事件；类为active-low时，触发.button-low的点击事件
• 页面是动态的，该同级元素的类会在active-high和active-low之间自动切换，必须实时检测状态变化，每次切换都要自动触发对应按钮
• 注意：不能通过.item_label类或元素位置定位目标，必须通过文本BIG_1识别

1. 定位目标状态元素 #

首先通过精准文本匹配找到目标<span>，再获取它的同级状态元素：

// 精准匹配文本为BIG_1的span（避免包含该文本的其他元素误匹配）
const targetLabel = $('span.item_label').filter(function() {
  return $(this).text().trim() === 'BIG_1';
});
// 获取其同级的状态span（类以active-开头）
const statusSpan = targetLabel.siblings('span[class^="active-"]');

2. 监听类名变化并触发对应操作 #

由于是动态页面，我们用MutationObserver监听状态元素的类名变化，每次变化后执行对应逻辑，同时初始化时也触发一次初始状态的操作：

// 定义类变化后的处理函数
function handleClassChange(element) {
  const currentClass = $(element).attr('class');
  if (currentClass.includes('active-high')) {
    $('.button-high').trigger('click');
  } else if (currentClass.includes('active-low')) {
    $('.button-low').trigger('click');
  }
}

// 初始化时先执行一次，确保初始状态生效
handleClassChange(statusSpan[0]);

// 创建MutationObserver监听类名变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      handleClassChange(mutation.target);
    }
  });
});

// 配置监听选项，只监听class属性变化
observer.observe(statusSpan[0], {
  attributes: true,
  attributeFilter: ['class']
});

关键说明 #

• 用filter配合text().trim()实现精准文本匹配，比:contains()更可靠，避免其他包含BIG_1的元素被误选中
• MutationObserver是原生DOM监听API，能实时捕获元素类名的修改，完美适配动态页面的需求
• trigger('click')会模拟真实的点击事件，和用户手动点击按钮的效果完全一致

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