使用jQuery的按钮点击后无法隐藏.red和.yellow类div的原因是什么？

核心错误是你使用了错误的jQuery多元素选择器语法：

• 你写的$('.red', '.yellow')是jQuery的上下文选择器写法，含义为查找所有.yellow元素内部的.red元素，你的页面中红黄div是平级关系，没有嵌套，所以匹配不到任何元素，点击没有响应。
• 正确的多元素选择器需要把所有选择规则放在同一个字符串内，用逗号分隔：$('.red, .yellow')

你之前尝试用toggleClass绑定visibility: hidden的类没生效也是同样的原因，选择器没有匹配到目标元素，修正选择器语法后两种写法都可以正常运行。

修正后的完整JS代码如下：

$(document).ready(function() {
  $('#option_blue').click(function() {
    $('.red, .yellow').toggle();
  })
})

如果你后续需要扩展红、黄按钮的同类功能，可以用更通用的写法，避免重复写事件绑定：

1. 给所有颜色按钮加统一类名与自定义属性，示例：

<button class="color-toggle" data-color="blue">blue</button>
<button class="color-toggle" data-color="red">red</button>
<button class="color-toggle" data-color="yellow">yellow</button>

2. 通用事件代码：

$(document).ready(function() {
  $('.color-toggle').click(function() {
    const targetColor = $(this).data('color');
    // 选中所有颜色块，排除和按钮匹配的，执行切换显示
    $('.flex > div').not(`.${targetColor}`).toggle();
  })
})

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