如何在第一个按钮获取variation-two类时隐藏第二个按钮？

方法一：纯CSS实现（最简单） #

如果两个按钮是兄弟元素（结构上处于同一父容器下），直接用CSS选择器就能完成需求，无需JS：

/* 两个按钮是相邻兄弟时使用 */
.arguments.variation-two + .simple {
    display: none;
}

/* 两个按钮之间有其他元素时，用通用兄弟选择器 */
.arguments.variation-two ~ .simple {
    display: none;
}

原理：当.arguments按钮拥有variation-two类时，自动选中它后方的.simple按钮并隐藏。

方法二：jQuery实现（支持动态类变化） #

你之前的代码存在两个问题：

1. hasClass的参数不需要加.，直接写类名即可
2. 仅在页面加载时判断一次，无法响应后续动态添加/移除的类

改用MutationObserver监听类属性变化，确保类更新时立即触发逻辑：

$(document).ready(function() {
    const $argsBtn = $('.arguments');
    const $simpleBtn = $('.simple');

    // 定义检查类的逻辑
    const checkClass = () => {
        $argsBtn.hasClass('variation-two') ? $simpleBtn.hide() : $simpleBtn.show();
    };

    // 页面加载时先执行一次
    checkClass();

    // 监听按钮的类属性变化
    const observer = new MutationObserver(checkClass);
    observer.observe($argsBtn[0], { attributes: true, attributeFilter: ['class'] });
});

方法三：原生JavaScript实现（无jQuery依赖） #

如果不想引入jQuery，原生JS也能实现相同效果：

document.addEventListener('DOMContentLoaded', function() {
    const argsBtn = document.querySelector('.arguments');
    const simpleBtn = document.querySelector('.simple');

    const checkClass = () => {
        simpleBtn.style.display = argsBtn.classList.contains('variation-two') ? 'none' : '';
    };

    // 初始化检查
    checkClass();

    // 监听类属性变化
    const observer = new MutationObserver(checkClass);
    observer.observe(argsBtn, { attributes: true, attributeFilter: ['class'] });
});

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