为什么当我点击它时，使用jQuery函数的按钮没有用类：.red，.yellow隐藏我的div？

Question

我做了这个函数来隐藏不是按钮文字颜色的div。当我按下按钮时，似乎什么都没有发生，没有隐藏任何类。我已经将js链接到html文件中了。我试着用visibility:hidden类添加toggleClass，但似乎效果不佳。我想可能是按钮有问题。

​

$(document).ready(function() {

  $('#option_blue').click(function() {

    $('.red', '.yellow').toggle();

  })
})

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
}

.blue {
  height: 100px;
  width: 100px;
  background-color: blue;
}

.red {
  height: 100px;
  width: 100px;
  background-color: red;
}

.yellow {
  height: 100px;
  width: 100px;
  background-color: yellow;
}


/*The style for my element boxes*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="option_blue">blue</button>
<div class="flex">

  <div class="blue">
    <!--The divs are boxes containing content -->
  </div>

  <div class="red">
  </div>

  <div class="yellow">
  </div>

  <div class="blue">
  </div>

  <div class="red">
  </div>

  <div class="yellow">
  </div>

</div>

​

Answer 1

选择器必须在唯一的字符串上，逗号在字符串选择器：documentation link中。

$('.red, .yellow').toggle();

​

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="option_blue">blue</button>
<div class="flex">

  <div class="blue">
    <!--The divs are boxes containing content -->
  </div>

  <div class="red">
    red
  </div>

  <div class="yellow">
    yellow
  </div>

  <div class="blue">
    blue
  </div>

  <div class="red">
    red
  </div>

  <div class="yellow">
    yellow
  </div>

</div>

​