消解复杂关联，细分选品布局，勾勒清晰电商导购思路

前端

2024-01-11 11:37:07

电商导购的优化之道：解耦父子级关联，提升用户体验

痛点剖析：父级子级关联的烦恼

在电商导购中，品类繁多的产品陈列往往需要分级展示。然而，传统的父子级关联选择器设计却给用户带来了诸多不便：点击子级导致父级不可选，点击父级导致子级禁用。这种相互牵制的交互方式不仅让用户感到困惑，更影响了操作的流畅性。

设计思路：独立操控，解耦关联

为解决上述痛点，我们需要对父子级展示的逻辑进行重构。核心思想是：解耦父子级之间的关联选择器，实现独立操控。具体来说，需要实现以下目标：

点击子级时，父级不可选，但应有样式标注，表明所属关系。
点击父级时，子级不可选，但应有样式标注，表明所属关系。
父子级均可独立取消选中状态。

技术实现：CSS与JavaScript的联袂

要实现上述设计思路，我们需要借助CSS和JavaScript的协作。CSS负责样式控制，JavaScript负责事件处理和状态管理。

CSS样式设置

首先，我们需要为父子级元素设置相应的CSS样式。父级元素添加“parent”类，子级元素添加“child”类。

.parent {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.child {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

JavaScript事件处理

接下来，我们需要使用JavaScript来处理点击事件和状态管理。

// 获取父级元素和子级元素
const parentElements = document.querySelectorAll('.parent');
const childElements = document.querySelectorAll('.child');

// 添加点击事件监听器
parentElements.forEach((parent) => {
  parent.addEventListener('click', (event) => {
    // 获取当前父级元素的所有子级元素
    const children = parent.querySelectorAll('.child');

    // 禁用所有子级元素
    children.forEach((child) => {
      child.classList.add('disabled');
    });

    // 为当前父级元素添加选中样式
    parent.classList.add('selected');
  });
});

childElements.forEach((child) => {
  child.addEventListener('click', (event) => {
    // 获取当前子级元素的父级元素
    const parent = child.parentElement;

    // 禁用所有子级元素
    const children = parent.querySelectorAll('.child');
    children.forEach((child) => {
      child.classList.add('disabled');
    });

    // 为当前子级元素添加选中样式
    child.classList.add('selected');

    // 为当前子级元素的父级元素添加选中样式
    parent.classList.add('selected');
  });
});