如何解决JavaScript .sort无法正确排序我的数据,请解释
我有两个用.forEach()渲染的列表。您可以在左上角看到考试和课程。但是,由于要点,当我尝试对列表进行排序时。这是可行的,但只有切换到另一个列表(我的意思是“课程列表”)时,我才能看到结果,然后再次返回,我可以看到它实际上是排序的。我想实时查看结果。有人可以帮帮我吗 ?也许结构不正确。我尝试对虚拟数据进行排序,然后将排序后的数据提供给循环并再次呈现,但是它不起作用或无法正确执行。这是 CodePen Live版本(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,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中起作用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。