前端重复代码处理问题

img


tab中的三个div每次切换设置颜色其他div恢复颜色（每个div颜色不同），各位大手子类似这样的代码你们对其是如何处理的，感谢解答

使用key-value取值的方式

const sizeObj = {
  "regLi": ["","layui-this","layui-tab-item","layui-tab-item layui-show","background: #FA5928"],
  "loginLi": ["","layui-this","layui-tab-item","layui-tab-item layui-show","background: #FA5928"],
  "resetLi": ["","layui-this","layui-tab-item","layui-tab-item layui-show","background: #FA5928"],
}
function setTab(size) {
  document.getElementById("resetLi").setAttribute("class", sizeObj[size][0])
  document.getElementById("loginLi").setAttribute("class", sizeObj[size][0])
  document.getElementById("regLi").setAttribute("class", sizeObj[size][1])

  document.getElementById("tabReset").setAttribute("class", sizeObj[size][2])
  document.getElementById("tabLogin").setAttribute("class", sizeObj[size][2])
  document.getElementById("tabReg").setAttribute("class", sizeObj[size][3])

  document.getElementById("resetLi").setAttribute("style", sizeObj[size][0])
  document.getElementById("loginLi").setAttribute("style", sizeObj[size][0])
  document.getElementById("regLi").setAttribute("style", sizeObj[size][4])
}

根據現有的代碼和需求，我的想法是這九行封裝成一個方法，方法有九個參數

img

代码贴出来 帮你改

把所有的Id 、 属性名和属性值 整合成一个数组吧，全部for循环一下就可以了

相同部分的提取出来 ，然后 写一个函数 传不同参数