使用jQuery实现点击选项切换显示对应衣柜门样式的功能求助

解决方案 #

核心逻辑调整 #

要实现选中时自动隐藏其他区块，只需要在每个点击事件最开始，统一将所有柜门元素设置为隐藏状态，再单独处理当前选中项的显示逻辑即可。同时建议通过自定义属性绑定按钮和对应柜门选择器，减少重复代码，也方便后续新增柜门类型时快速扩展。

完整修改代码 #

HTML修改

给每个按钮添加data-target自定义属性，值为对应要显示的柜门元素选择器，同时给所有柜门元素统一加公共类door-item，方便统一控制隐藏：

<div class="door_all">
  <div class="door_1">
    <div class="door_1_1">
      <div class="door-item door_1_1_1 hide"></div>
    </div>
    <div class="door_1_2">
      <div class="door-item door_1_2_1 hide"></div>
      <div class="door-item door_1_2_2 hide"></div>
    </div>
    <div class="door_1_3">
      <div class="door-item door_1_3_1 hide"></div>
      <div class="door-item door_1_3_2 hide"></div>
      <div class="door-item door_1_3_3 hide"></div>
    </div>
  </div>
</div>
<div class="btn-column">
  <div>
    <button class="section-1 section-btn">
  section 1
  </button>
    <div class="type-1">
      <button class="btn-type" data-target=".door_1_1_1">type 1-1</button>
      <button class="btn-type" data-target=".door_1_2_1, .door_1_2_2">type 1-2</button>
      <button class="btn-type" data-target=".door_1_3_1, .door_1_3_2, .door_1_3_3">type 1-3</button>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

JS修改

统一绑定按钮点击事件，先隐藏所有柜门，再显示当前选中的对应柜门：

$(document).ready(function() {
  $(".btn-type").click(function() {
    // 先隐藏所有柜门元素
    $(".door-item").removeClass("show").addClass("hide");
    // 获取当前按钮对应的柜门选择器
    const targetDoor = $(this).attr("data-target");
    // 显示对应柜门
    $(targetDoor).removeClass("hide").addClass("show");
  });
});

CSS修改（新增背景样式示例）

直接给对应柜门类加背景样式即可：

.type-1,
.type-2,
.type-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-column {
  display: flex;
  flex-direction: row;
}

.show {
  display: flex;
}

.hide {
  display: none;
}

.door_all {
  display: flex;
  flex-direction: row;
}

.door_1_1_1 {
  width: 50px;
  height: 150px;
  border: 4px solid black;
  /* 单独背景样式示例 */
  background: #f5e6d3;
}

.door_1_2_1,
.door_1_2_2 {
  width: 50px;
  height: 75px;
  border: 4px solid black;
  /* 单独背景样式示例 */
  background: #d3eaf5;
}

.door_1_3_1,
.door_1_3_2,
.door_1_3_3 {
  width: 50px;
  height: 50px;
  border: 4px solid black;
  /* 单独背景样式示例 */
  background: #e2d3f5;
}

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