JavaScript .sort()不能正确排序我的数据，请解释
JavaScript .sort()不能正确排序我的数据，请解释
提问于 2020-08-14 21:25:38
我有两个列表，它使用.forEach()进行呈现。你可以看到在左上角的考试，和的课程。但是，当我试图排序我的列表由于点。这是工作，但我只能看到结果切换到我的另一个列表(我的意思是；课程清单)，并再次回来，我可以看到它实际上是排序。我想实时看到结果。有人能帮帮我吗？也许结构不对。我试图对我的虚拟数据进行排序，然后将排序后的数据交给循环并重新呈现，但这不是工作，否则我做不到。这里是CodePen Live version (https://codepen.io/ruslancik/pen/xxVGEBE?editors=0010)
//Dummy data for each list
const exams = [
{
bal: 681,
qrup: 'II qrup',
zaman: 40,
tarix: '22 iyul 2020, 17:30',
},
{
bal: 602,
qrup: 'II qrup',
zaman: 31,
tarix: '16 may 2020, 17:30',
},
{
bal: 397,
qrup: 'II qrup',
zaman: 63,
tarix: '20 iyun 2020, 17:30',
},
{
bal: 401,
qrup: 'II qrup',
zaman: 49,
tarix: '25 mart 2020, 17:30',
}
];
const lessons = [
{
bal: 58,
qrup: 'Azərbaycan dili',
zaman: 64,
tarix: '20 iyul 2020, 17:30',
},
{
bal: 75,
qrup: 'İngilis dili',
zaman: 63,
tarix: '14 may 2020, 17:30',
},
{
bal: 75,
qrup: 'Riyaziyyat',
zaman: 63,
tarix: '20 iyun 2020, 17:30',
},
{
bal: 51,
qrup: 'Azərbaycan dili',
zaman: 49,
tarix: '25 mart 2020, 17:30',
},
{
bal: 67,
qrup: 'Azərbaycan dili',
zaman: 49,
tarix: '25 mart 2020, 17:30',
},
{
bal: 53,
qrup: 'Kimya',
zaman: 49,
tarix: '25 mart 2020, 17:30',
},
{
bal: 51,
qrup: 'Azərbaycan dili',
zaman: 49,
tarix: '25 mart 2020, 17:30',
},
{
bal: 62,
qrup: 'Fizika',
zaman: 49,
tarix: '25 mart 2020, 17:30',
}
];
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, 130, 255, 1)';
examSelector.style.color='rgba(4, 37, 96, .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'))
})回答 1
Stack Overflow用户
发布于 2020-08-14 21:38:13
在对数据进行排序之后，您需要再次调用examHandler()。单击元素时，只有JavaScript变量已被更改(排序)，但呈现的html没有更改。当您来回切换时，html首先会被更改，因此它在那里工作，原因是重命名。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63420197
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号