本文共 6374 字，大约阅读时间需要 21 分钟。

sku的处理

sku电商项目，里面的规格之类。

在没有想法的时候写着确实费劲。

完成后的效果

文件路劲示意图

html文件

index.html

    
       
       
           
                   
sku
    
   
        
        
   
    
修改数据
    
   
        
            
    确认    
   

css代码

css/index.css

#app {       width: 600px;    padding-top: 100px;    position: relative;    left: 50%;    transform: translateX(-50%);}#app .item {       display: flex;    margin: 10px 0;}#app .item .title {       font-size: 20px;    font-weight: 700;    width: 100px;}#app .item .tag {       border: solid 1px #000;    border-radius: 5px;    padding: 3px 10px;    margin: 10px;    cursor: pointer;    /* 不让文字双击选中 */    user-select: none;}#app .item .tag.active {       background-color: pink;}#app .item .tag.noactive {       background-color: #ccc;}/* 扩展 */.json-data {       margin-top: 30px;    width: 700px;    height: 400px;    position: relative;    left: 50%;    transform: translateX(-50%);}.json-data #fwb {       height: 300px;    width: 700px;    font-size: 20px;}.json-data #ok {       width: 100px;    height: 40px;    background-color: #007ACC;    border: none ;    color: #fff;}

js代码

js/sku.js

/*** * 创建dom * el           ->  标签类型 * className    ->  class */function createDOM(obj) {     obj = {    ...{    el: "div", className: "", innerText: "" }, ...obj };  let el = document.createElement(obj.el);  if (obj.className !== "") el.className = obj.className;  if (obj.innerText !== "") el.innerText = obj.innerText;  return el;}window.onload = () => {     let app = document.querySelector("#app");  //   选中的内容  let active = {   };  //   获取数据 产品 某一项规格 的所有选项  function handleSky(arr, key) {       let retArrs = [];    arr.forEach((item) => {         if (!retArrs.includes(item[key])) retArrs.push(item[key]);    });    return retArrs;  }  //  页面展示数据 处理数据  function handleData(arr, obj) {       let skuKeyArr = [];    for (let item in obj) {         // 递归 拿到所有产品的选项      let obj = {    key: item, arr: handleSky(arr, item) };      skuKeyArr.push(obj);    }    return skuKeyArr;  }  //   渲染dom  function viewDom(data) {       data = {    ...{    SkuDataArr: [] }, ...data };    //   清除dom    app.innerHTML = "";    data.arr.forEach((ite) => {         let items = createDOM({    className: "item" });      let title = createDOM({           className: "title",        innerText: skuKeyObj[ite.key],      });      items.appendChild(title);      ite.arr.forEach((el) => {           let tag = createDOM({    className: "tag", innerText: el });        tag.setAttribute("data-lei", ite.key);        // 添加点击事件        tag.onclick = selectTag;                // 重置所有选项        if (data.SkuDataArr.length == 0) {             tag.className = "tag";          tag.setAttribute("data-disabled", false);        } else {             tag.className = "tag noactive";          tag.setAttribute("data-disabled", true);        }        let boo = true;        for (let index = 0; index < data.SkuDataArr.length; index++) {             const element = data.SkuDataArr[index];          if (element[ite.key] == el && boo) {               tag.className = "tag";            tag.setAttribute("data-disabled", false);            boo = false;          }        }        // 判断选中的        if (data.active && data.active[ite.key] == el)          tag.className = "tag active";        items.appendChild(tag);      });      app.appendChild(items);    });    //   结账    // 处理新的skuData    if (data.SkuDataArr.length == 1) {         let items = createDOM({    className: "item" });      items.appendChild(        createDOM({             className: "title",          innerText: "结账",        })      );      items.appendChild(        createDOM({             className: "p",          innerText: `共${     data.SkuDataArr[0].price}元`,        })      );      app.appendChild(items);    }  }  //   点击选中  function selectTag(e) {       if (e.target.dataset.disabled == "true") return;    if (active[e.target.dataset.lei] == e.target.innerText) {         delete active[e.target.dataset.lei];    } else {         active[e.target.dataset.lei] = e.target.innerText;    }    let SkuDataArr = retHandleSkuData(active, skuData);    // 渲染页面    viewDom({         arr: handleData(skuData, skuKeyObj),      active: active,      SkuDataArr: SkuDataArr,    });    return;  }  //   处理skuData数据  function retHandleSkuData(obj, arr) {       let arrCy = []; // 存过滤后的数据    let retArr = JSON.parse(JSON.stringify(arr)); // 要返回的数据  完整数据  后续过滤ok的数据 预备准备多次过滤    for (let key in obj) {         retArr.forEach((el) => {           if (el[key] == obj[key]) {             arrCy.push(el);        }      });      retArr = JSON.parse(JSON.stringify(arrCy));      arrCy = [];    }    return retArr;  }  viewDom({    arr: handleData(skuData, skuKeyObj), active: active });  // ------------------------------扩展-------------------------  let fwb = document.querySelector("#fwb");  let ok = document.querySelector("#ok");  console.dir(fwb)  fwb.value = JSON.stringify(skuData);  ok.onclick = function (e) {        skuData = JSON.parse(fwb.value);    viewDom({    arr: handleData(skuData, skuKeyObj), active: active });  }};

js数据

js/data.js

let skuData = [  {    color: "red", name: "小米5", internal: "4G", price: 1999 },  {    color: "red", name: "小米5", internal: "6G", price: 2991 },  {    color: "red", name: "小米5", internal: "8G", price: 3992 },  {    color: "red", name: "小米6", internal: "4G", price: 4993 },  {    color: "red", name: "小米6", internal: "6G", price: 5994 },  {    color: "red", name: "小米6", internal: "8G", price: 6995 },  // { color: "pink", name: "小米5", internal: "4G", price: 1996 },  // { color: "pink", name: "小米5", internal: "6G", price: 2997 },  // { color: "pink", name: "小米5", internal: "8G", price: 3998 },  // { color: "pink", name: "小米6", internal: "4G", price: 4999 },  // { color: "pink", name: "小米6", internal: "6G", price: 5991 },  {    color: "pink", name: "小米6", internal: "8G", price: 6992 },  {    color: "black", name: "小米5", internal: "4G", price: 1993 },  {    color: "black", name: "小米5", internal: "6G", price: 2994 },  // { color: "black", name: "小米5", internal: "8G", price: 3995 },  // { color: "black", name: "小米6", internal: "4G", price: 4996 },  // { color: "black", name: "小米6", internal: "6G", price: 5997 },  // { color: "black", name: "小米6", internal: "8G", price: 6998 },];const skuKeyObj = {     color: "颜色",  name: "型号",  internal: "配置",};

最后

这种写法主要是提供一个思路， 不是很成熟。仅仅供给大家学习之用。