点击按钮时运行随机函数展示随机人员信息的前端实现问题

原有代码问题排查 #

• 第一个switch版本错误点：
  1. click事件绑定的回调函数语法错误，function) 缺少左括号，应为 function()
  2. case分支中仅定义了匿名函数，没有主动执行，对应逻辑永远不会触发
  3. 随机数生成逻辑为 Math.floor(Math.random()*2)，仅能生成0、1两个值，case 2 永远无法命中
• 第二个多函数版本的问题：单独为每个人员定义渲染函数，代码冗余，40条数据就要定义40个函数，维护成本极高

最优实现方案（推荐） #

直接把所有人员信息整理成结构化数组，点击时随机取数组元素渲染即可，代码简洁易维护：

// 1. 先定义所有人员数据，40条就往数组里加40个对象即可
const personList = [
  {
    name: 'Josephine',
    avatar: '22Josephine.png',
    slogan: 'Decisions cultivate experience.'
  },
  {
    name: 'Emily',
    avatar: '21Emily.png',
    slogan: 'Decisions cultivate experience.'
  },
  {
    name: 'Erica',
    avatar: '20Erica.png',
    slogan: 'Decisions cultivate experience.'
  }
  // 剩余37条数据按上面格式补充即可
]

// 2. 绑定点击事件
$("#ball").click(function() {
  // 生成0到39的随机索引
  const randomIndex = Math.floor(Math.random() * personList.length)
  // 取随机选中的人员信息
  const selected = personList[randomIndex]
  // 渲染内容
  $(".gachaPopup .avatar").html(`<img src='images/catalog/${selected.avatar}' alt='' />`)
  $(".artistinfo .boxed").html(`<h1>${selected.name}</h1><h2>"${selected.slogan}"</h2><a href="#">Go To Profile</a>`)
  // 此处补充弹窗显示逻辑即可，比如 $('.gachaPopup').show()
})

兼容原有多函数方案 #

如果不想调整已定义的40个gacha函数，可把所有函数放入数组，随机取索引执行即可：

// 把你定义的所有gacha函数按顺序放入数组
const gachaFnList = [gacha1, gacha2, gacha3 /* 剩余37个函数依次填入 */]
$("#ball").click(function() {
  const randomIndex = Math.floor(Math.random() * gachaFnList.length)
  // 执行随机选中的函数
  gachaFnList[randomIndex]()
})

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