使用JavaScript（jQuery）批量调盒子尺寸：仅首个盒子生效问题

问题根源 #

你用document.querySelector(".box")获取盒子元素，但这个方法只会返回页面中第一个匹配.box类的元素，所以后续的添加/移除类操作只作用在第一个盒子上，其他盒子完全没被选中，自然不会有变化。

解决方案（两种方式可选） #

方式1：用jQuery简化操作（推荐，因为你已经引入了jQuery） #

直接用jQuery的类选择器$(".box")选中所有盒子，它会自动处理所有匹配元素，无需手动遍历。修正后的JS代码如下：

$(".btn_one").click(function() {
  $(".box").removeClass("box_two box_three");
});

$(".btn_two").click(function() {
  $(".box").removeClass("box_three").addClass("box_two");
});

$(".btn_three").click(function() {
  $(".box").removeClass("box_two").addClass("box_three");
});

方式2：纯JavaScript实现 #

如果想用原生JS，需要用document.querySelectorAll(".box")获取所有盒子，然后遍历每个元素执行类操作：

const boxes = document.querySelectorAll(".box");
const btnOne = document.querySelector(".btn_one");
const btnTwo = document.querySelector(".btn_two");
const btnThree = document.querySelector(".btn_three");

btnOne.addEventListener("click", function() {
  boxes.forEach(box => {
    box.classList.remove("box_two", "box_three");
  });
});

btnTwo.addEventListener("click", function() {
  boxes.forEach(box => {
    box.classList.remove("box_three");
    box.classList.add("box_two");
  });
});

btnThree.addEventListener("click", function() {
  boxes.forEach(box => {
    box.classList.remove("box_two");
    box.classList.add("box_three");
  });
});

完整可运行代码 #

以下是整合后的完整代码，直接复制即可运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>同步调整盒子尺寸</title>
  <style>
    .main-BOX {
        box-shadow: 0 0 4px #000;
        width: 500px;
        height: auto;
        margin: 3rem auto 5rem;
        padding: 10px;
    }

    .btn_one,
    .btn_two,
    .btn_three {
        font-size: 35px;
        background: #93ff8a;
        color: #f87070;
        border: none;
        padding: 10px;
        margin: 15px;
        border-radius: 50%;
        cursor: pointer;
    }

    .box {
        width: 90%;
        height: 190px;
        box-shadow: 0 0 5px #000;
        background: #61cc8b;
        margin: 25px;
        border-radius: 5px;
    }

    .box_two {
        width: 30%;
        height: 240px;
        box-shadow: 0 0 5px #3add89;
        background: #2572e9;
    }

    .box_three {
        width: 90%;
        height: 70px;
        box-shadow: 0 0 5px #a2dd3a;
        background: #e925dd;
    }
  </style>
</head>
<body>
  <section class="main-BOX">
    <button class="btn_one">1</button>
    <button class="btn_two">2</button>
    <button class="btn_three">3</button>

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    // 这里用jQuery版本的代码，也可以替换成上面的原生JS代码
    $(".btn_one").click(function() {
      $(".box").removeClass("box_two box_three");
    });

    $(".btn_two").click(function() {
      $(".box").removeClass("box_three").addClass("box_two");
    });

    $(".btn_three").click(function() {
      $(".box").removeClass("box_two").addClass("box_three");
    });
  </script>
</body>
</html>

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