javascript - 需要一个数组来存储具有相同属性的不同对象的不同数据（或其他一些有意义的策略）

Question

我对这一切都很陌生，所以如果我遗漏了一些明显的东西，请原谅我。我正在构建一个工具，该工具应该为特定学生跟踪特定目标的评估数据。我使用 JavaScript 和 jQuery 构建了一个函数，它执行以下操作： 1. 为新学生 (currentStudentArray) 初始化数组。2. 对于每个目标，初始化一个数组来保存评估数据（newEvalArray），获取目标名称，然后遍历每个评估。3. 每次评估，获取日期、分数、分数百分比；它将评估数据打包到一个对象中，然后将对象发送到保存评估数据的数组（newEvalArray）。4.回到每个目标层级：目标名称和评估数组被打包成一个对象，该对象被发送到currentStudentArray。5. 最后，学生

问题是我的 newEvalArray 不会在每个目标循环中重新开始，而是将前一个目标的所有评估与下一个目标的评估堆叠起来，然后存储两个目标的所有评估。我想做的只是将对该目标的评估存储在数组中该目标下。我对应用程序的了解还不够远，无法测试我的 currentStudentsArray 会发生什么，但我怀疑一旦我有多个目标不同的学生，它也会遇到同样的问题。但我还没有达到那个水平。现在我只想弄清楚 newEvalArray 发生了什么。预期输出：控制台应根据我目前在 HTML 中的占位符记录长度为 4 的两个评估数组（每个目标一个）。相反，它记录长度为 8 的数组，它们包含每个目标的所有评估。这是该函数的代码：

var currentStudent = "Steve";
var studentsGoalsArray = [];
var studentGoalUpdate = function () {
    var currentStudentArray = [];
    $(".goal").each(function(){
        var newEvalArray = [];
        var goalName = $(this).children("h2").text();
        console.log("Goal name is: " + goalName);
        $(".goal-eval").each(function(){
            var evalDate = $(this).children("p").text();
            console.log("EvalDate is: " + evalDate);
            var scoreContainerEl = $(this).children("div");
            var scoreContainerChildren = scoreContainerEl.children();           
            var evalScore = scoreContainerChildren[0].textContent;
            console.log("EvalScore is: " + evalScore);
            var scorePercent = scoreContainerChildren[1].textContent;
            console.log("ScorePercent is: " + scorePercent);
            console.log(evalDate, evalScore, scorePercent);
            var evalObj = {date: evalDate, score: evalScore, percent: scorePercent};
            console.log(evalObj);
            newEvalArray.push(evalObj);
            console.log(newEvalArray);
        });
    
        var goalDataObj = {goal: goalName, eval: newEvalArray}
        currentStudentArray.push(goalDataObj);
        console.log(currentStudentArray);
    });
    studUpdateArrayData = {student: currentStudent, data: currentStudentArray}
    studentsGoalsArray.push(studUpdateArrayData);
    console.log(studentsGoalsArray);
};

$("#newEvalBtn").on("click", studentGoalUpdate);

 <div class="col" id="goals-wrapper">
            
            <!--Goals displayed here-->
            <div class="col bg-light d-flex justify-content-between flex-wrap border-top-0" id="goals-container">
                
                    <div class="goal col-11 col-md-5 card my-3 bg-goal p-0">
                        <h2 class="p-2">Yes/No</h2>
                        <div class="p-3 bg-white mx-1 mb-1 overflow-auto">
                            <h3>Goal description:</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <button class="btn bg-goal mb-3" id="newEvalBtn">New Evaluation</button>
                            <div class="list-group d-flex">
                                <div class="goal-eval list-group-item bg-goal">
                                    <p class="evalDate">10/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="score border-bottom">3/10</p> <p class="scorePercent border-bottom">30%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>11/15/20202</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">5/10</p> <p class="border-bottom">50%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>12/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">6/10</p> <p class="border-bottom">60%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>1/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">9/10</p> <p class="border-bottom">90%</p>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                    <div class="goal col-11 col-md-5 card my-3 bg-goal p-0">
                        <h2 class="p-2">When</h2>
                        <div class="p-3 bg-white mx-1 mb-1 overflow-auto">
                            <h3>Goal description:</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <button class="btn bg-goal mb-3" id="newEvalBtn">New Evaluation</button>
                            <div class="list-group d-flex">
                                <div class="goal-eval list-group-item bg-goal">
                                    <p class="evalDate">10/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="score border-bottom">5/10</p> <p class="scorePercent border-bottom">50%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>11/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">7/10</p> <p class="border-bottom">70%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>12/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">8/10</p> <p class="border-bottom">80%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>01/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">10/10</p> <p class="border-bottom">100%</p>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                 
                    
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

标签： javascriptarrays

Answer 1

你的newEvalArray重置很好，但是你用所有的目标评估来填充它。

发生这种情况是因为您使用$(".goal-eval").eachwhich 查找.goal-eval页面中的所有节点，而不仅仅是当前.goal.

您需要添加正确的上下文来限制搜索。由于该行位于$(".goal").each处理程序内部，因此您可以将this其作为第二个参数传递。

所以使用(".goal-eval", this).each应该可以解决你的问题。

var currentStudent = "Steve";
var studentsGoalsArray = [];
var studentGoalUpdate = function () {
    var currentStudentArray = [];
    $(".goal").each(function(){
        var newEvalArray = [];
        var goalName = $(this).children("h2").text();
        $(".goal-eval", this).each(function(){
            var evalDate = $(this).children("p").text();
            var scoreContainerEl = $(this).children("div");
            var scoreContainerChildren = scoreContainerEl.children();           
            var evalScore = scoreContainerChildren[0].textContent;
            var scorePercent = scoreContainerChildren[1].textContent;
            var evalObj = {date: evalDate, score: evalScore, percent: scorePercent};
            newEvalArray.push(evalObj);
        });
    
        var goalDataObj = {goal: goalName, eval: newEvalArray}
        currentStudentArray.push(goalDataObj);
    });
    studUpdateArrayData = {student: currentStudent, data: currentStudentArray}
    studentsGoalsArray.push(studUpdateArrayData);
    console.log(studentsGoalsArray);
};

$("#newEvalBtn").on("click", studentGoalUpdate);

<div class="col" id="goals-wrapper">
            
            <!--Goals displayed here-->
            <div class="col bg-light d-flex justify-content-between flex-wrap border-top-0" id="goals-container">
                
                    <div class="goal col-11 col-md-5 card my-3 bg-goal p-0">
                        <h2 class="p-2">Yes/No</h2>
                        <div class="p-3 bg-white mx-1 mb-1 overflow-auto">
                            <h3>Goal description:</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <button class="btn bg-goal mb-3" id="newEvalBtn">New Evaluation</button>
                            <div class="list-group d-flex">
                                <div class="goal-eval list-group-item bg-goal">
                                    <p class="evalDate">10/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="score border-bottom">3/10</p> <p class="scorePercent border-bottom">30%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>11/15/20202</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">5/10</p> <p class="border-bottom">50%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>12/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">6/10</p> <p class="border-bottom">60%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>1/15/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">9/10</p> <p class="border-bottom">90%</p>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                    <div class="goal col-11 col-md-5 card my-3 bg-goal p-0">
                        <h2 class="p-2">When</h2>
                        <div class="p-3 bg-white mx-1 mb-1 overflow-auto">
                            <h3>Goal description:</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                            <button class="btn bg-goal mb-3" id="newEvalBtn">New Evaluation</button>
                            <div class="list-group d-flex">
                                <div class="goal-eval list-group-item bg-goal">
                                    <p class="evalDate">10/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="score border-bottom">5/10</p> <p class="scorePercent border-bottom">50%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>11/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">7/10</p> <p class="border-bottom">70%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>12/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">8/10</p> <p class="border-bottom">80%</p>
                                    </div>
                                </div>
                                <div class="goal-eval list-group-item bg-goal">
                                    <p>01/25/2020</p>
                                    <div class="d-flex justify-content-between">
                                        <p class="border-bottom">10/10</p> <p class="border-bottom">100%</p>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                 
                    
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>