重构多级内容呈现系统

Question

我是javascript的新手，我正在为我在印度学校的学生开发教育材料。我已经创建了这个结构，它允许使用prev/next按钮在单词列表中循环，更改类别，并能够单击任何给定的单词以通过文本到语音的方式听到它。

它可以工作，这是我能做的最复杂的事情，但我知道它的构建方式肯定是非常低效和过时的。我正在努力学习更多关于事件侦听器的知识，以及如何在一般情况下简化结构。在过去的五个小时里，我一直在尝试使用我所学到的知识来更改这个结构，但是prev/next nav部分和我的项目在数组中的事实使它超出了我的范围。

希望询问有关如何重新配置它以使其更经济的一般输入不会越界。我花了很大力气才用我糟糕的技能走到这一步。非常感谢您的帮助。如果代码段不起作用，可以在这里看到页面。1

​

var levelone = [
"<div onclick=\"jQuery(this).articulate('rate',1).articulate('setVoice','language','hi').articulate('speak')\" data-articulate-append=\"\">Apple</div>",
"<div onclick=\"jQuery(this).articulate('rate',1).articulate('setVoice','language','hi').articulate('speak')\" data-articulate-append=\"\">Banana</div>",
"<div onclick=\"jQuery(this).articulate('rate',1).articulate('setVoice','language','hi').articulate('speak')\" data-articulate-append=\"\">Grapes</div>",
];
var leveltwo = [
"<div onclick=\"jQuery(this).articulate('rate',1).articulate('setVoice','language','hi').articulate('speak')\" data-articulate-append=\"\">Dog</div>",
"<div onclick=\"jQuery(this).articulate('rate',1).articulate('setVoice','language','hi').articulate('speak')\" data-articulate-append=\"\">Cat</div>",
"<div onclick=\"jQuery(this).articulate('rate',1).articulate('setVoice','language','hi').articulate('speak')\" data-articulate-append=\"\">Horse</div>",
];
var levelthree = [
"<div onclick=\"jQuery(this).articulate('rate',1).articulate('setVoice','language','hi').articulate('speak')\" data-articulate-append=\"\">Red</div>",
"<div onclick=\"jQuery(this).articulate('rate',1).articulate('setVoice','language','hi').articulate('speak')\" data-articulate-append=\"\">Yellow</div>",
"<div onclick=\"jQuery(this).articulate('rate',1).articulate('setVoice','language','hi').articulate('speak')\" data-articulate-append=\"\">Blue</div>",
];
            
            var box = document.getElementById('box');
            var i = -1;
            function next() {
                i = i >= start.length - 1 ? 0 : i + 1;
                box.innerHTML = start[i];
            }
            function prev() {
                i = i > 0 ? i - 1 : sav.length - 1;
                box.innerHTML = start[i];
            }
            
            $("#nextBtn").click(function() {
                var nextDiv = $(".step:visible").next(".step");
                if (nextDiv.length == 0) { // wrap around to beginning
                    nextDiv = $(".step:first");
                }
                $(".step").hide();
                nextDiv.show();
            });
                                
            $("#prevBtn").click(function() {
                var prevDiv = $(".step:visible").prev(".step");
                if (prevDiv.length == 0) { // wrap around to end
                    prevDiv = $(".step:last");
                }
                $(".step").hide();
                prevDiv.show();
            });
            function lone() {
                start = levelone.slice(0);
                box.innerHTML = levelone[0];
            }
            function ltwo() {
                start = leveltwo.slice(0);
                box.innerHTML = leveltwo[0];
            }
            function lthree() {
                start = levelthree.slice(0);
                box.innerHTML = levelthree[0];
            }

body {
  padding: 20px;
  font-size: 20px; 
  line-height: 1.5em
  }
div {
  cursor: pointer
  }

<meta http-equiv="Content-Language" content="hi">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://clients.brettcolephotography.com/test/jquery-3.1.1.min.js"></script>
        <script src="http://clients.brettcolephotography.com/test/articulate.min.js"></script>
    
        <div id="box">Pick a category. Then click on each word to hear it spoken.</div>
        
        <div>
            <button type="button" onclick="prev()">prev</button> 
            <button type="button" onclick="next()">next</button>
        </div>
        <div>
            <div onclick="lone()">Fruits</div>
            <div onclick="ltwo()">Animals</div>
            <div onclick="lthree()">Colors</div>
        </div>

​

Answer 1

我可以推荐一个设计模型：

• 有一个数组，类似const items=[]；
• 有另一个数组，类似const categories=“水果”，“动物”
• 当你的页面加载时，从数组上方获取顶级类别，例如:水果，然后有一个渲染函数，将数据推送到基于类别的项中。在推送之后，再次调用render函数，该函数根据items数组中可用的数据加载列表项。
• 将eventhandler附加到通过上述代码呈现的新列表项。