幸运转盘开发问题:如何显示常量名称而非字符串内容
解决方案
首先重构你的数据结构,把单纯的字符串数组改成包含显示名称和问题内容的对象数组,这样就能分别控制转盘显示的文本和弹出的内容:
// 重构后的问题数组,每个元素包含显示名称和对应问题 const questioncard = [ { name: '问题分类1', content: 'question1' }, { name: '问题分类2', content: 'question2' }, { name: '问题分类3', content: 'question3' } ]; // 随机选中一个问题对象 const selectedQuestion = questioncard[Math.floor(Math.random() * questioncard.length)];
接下来分两步实现需求:
- 转盘分段显示:把转盘对应分段的文本设置为
selectedQuestion.name,这样就能显示你要的标识名称 - 转盘停止后的操作:
- 给选中的转盘分段添加高亮类(比如
highlighted),用CSS设置样式实现标识效果 - 弹出alert显示问题内容:
alert(selectedQuestion.content)
- 给选中的转盘分段添加高亮类(比如
举个简单的DOM操作示例(假设转盘分段用类名wheel-segment):
// 转盘停止后执行的逻辑 // 1. 标识选中的分段 const segments = document.querySelectorAll('.wheel-segment'); segments.forEach((seg, index) => { if (index === questioncard.indexOf(selectedQuestion)) { seg.classList.add('highlighted'); } else { seg.classList.remove('highlighted'); } }); // 2. 弹出问题内容 alert(selectedQuestion.content);
对应的CSS高亮样式参考:
.highlighted { background-color: #ffd700; border: 2px solid #ff8c00; }
内容的提问来源于stack exchange,提问作者Renaldo
相关产品推荐
相关产品推荐

