JavaScript .sort无法正确排序我的数据，请解释

问题描述

我有两个用.forEach（）渲染的列表。您可以在左上角看到考试和课程。但是，由于要点，当我尝试对列表进行排序时。这是可行的，但只有切换到另一个列表（我的意思是“课程列表”）时，我才能看到结果，然后再次返回，我可以看到它实际上是排序的。我想实时查看结果。有人可以帮帮我吗 ？也许结构不正确。我尝试对虚拟数据进行排序，然后将排序后的数据提供给循环并再次呈现，但是它不起作用或无法正确执行。这是 CodePen Live版本（https://codepen.io/ruslancik/pen/xxVGEBE?editors=0010 ）@H_502_9@

//Dummy data for each list
    const exams = [
        {
            bal: 681,qrup: 'II qrup',zaman: 40,tarix: '22 iyul 2020,17:30',},{
            bal: 602,zaman: 31,tarix: '16 may 2020,{
            bal: 397,zaman: 63,tarix: '20 iyun 2020,{
            bal: 401,zaman: 49,tarix: '25 mart 2020,}
    ];
    const lessons = [
        {
            bal: 58,qrup: 'Azərbaycan dili',zaman: 64,tarix: '20 iyul 2020,{
            bal: 75,qrup: 'İngilis dili',tarix: '14 may 2020,qrup: 'Riyaziyyat',{
            bal: 51,{
            bal: 67,{
            bal: 53,qrup: 'Kimya',{
            bal: 62,qrup: 'Fizika',}
    ];
    
    const examSelector = document.getElementById('exam');
    const lessonSelector = document.getElementById('lesson');
    
    examSelector.innerText = `Exams (${exams.length})`;
    lessonSelector.innerText = `Lessons (${lessons.length})`;
    
    
    const resultContainer = document.getElementById('result');
    
    
    window.addEventListener('load',examHandler )
    
    examSelector.addEventListener('click',examHandler )
    
    function examHandler(){
        //color
        examSelector.style.color='rgba(62,130,255,1)';
        lessonSelector.style.color='rgba(4,37,96,.3)';
    
    
        const resultList = document.querySelector('.result-list') || document.createElement('DIV');
        resultList.innerHTML = '';
        exams.forEach(item => {
            if (resultList.parentNode) resultList.parentNode.removeChild(resultList);
            resultList.className = 'result-list'
            resultContainer.appendChild(resultList);
            resultList.innerHTML += `
            <ul>
             <li>${item.bal}</li>
             <li>${item.qrup}</li>
             <li>${item.zaman} min</li>
             <li>${item.tarix}</li>
            </ul>
            `
         })
    };
    
    
    lessonSelector.addEventListener('click',lessonHandler )
    
    function lessonHandler() {
        //color
        lessonSelector.style.color='rgba(62,1)';
        examSelector.style.color='rgba(4,.3)';
    
    
        const resultList = document.querySelector('.result-list') || document.createElement('DIV');
        resultList.innerHTML = '';
        lessons.forEach(item => {
            
            if (resultList.parentNode) resultList.parentNode.removeChild(resultList);
            resultList.className = 'result-list'
            resultContainer.appendChild(resultList);
            resultList.innerHTML += `
            <ul>
            <li>${item.bal}%</li>
            <li>${item.qrup}</li>
            <li>${item.zaman} min</li>
            <li>${item.tarix}</li>
           </ul>
            `
    
         })
    
    };
    
    const resultFilter = document.getElementById('resultFilter');
    // const timeFilter = document.getElementById('timeFilter');
    // const datefilter = document.getElementById('datefilter');
    
    
    function dynamicSort(property) {
        var sortOrder = 1;
        if(property[0] === "-") {
             sortOrder = -1;
             property = property.substr(1);
        }
        return function (a,b) {
            var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
             return result * sortOrder;
        }
     }
    
    resultFilter.addEventListener('click',function() {
         exams.sort(dynamicSort('bal'))
     })

解决方法

对数据进行排序后，您需要再次调用examHandler()。单击元素时，仅JavaScript变量已更改（排序），但呈现的html不变。来回移动时，首先会更改html，因此由于重新渲染而在html中起作用