javascript - 如何在 JavaScript 中按字母顺序(升序和降序)排序
问题描述
HTML:
<section class="cd-gallery">
<ul id="courses">
</ul>
<div class="cd-fail-message">No results found</div>
</section>
<ul>
<li><input id="buttonaz" type="button" value="Course name(a-z)"/></li>
<li><input id="buttonza" type="button" value="Course name(z-a)"/></li>
<li><input id="buttonlu" type="button" value="Last updated"></li>
<ul>
JavaScript:
var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/..."
function init() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
simpleSheet: true } );
}
window.addEventListener('DOMContentLoaded', init);
function sortAZ(a, b) {
var x = a.Course.toLowerCase();
var y = b.Course.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
function sortZA(a, b) {
var x = a.Course.toLowerCase();
var y = b.Course.toLowerCase();
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
}
function showInfo(data) {
var bodyContent = '';
var sheetUrlRoot = 'https://docs.google.com/spreadsheets/d/';
var buttonaz = document.getElementById("buttonaz");
var buttonza = document.getElementById("buttonza");
console.log(data)
for (var i = 0; i < data.length; i++) {
var sheetUrl = sheetUrlRoot + data[i].ActionId;
var c = data[i].Course;
var courseName = '<div class=\"courseName\">' + c + '</div>';
var designer = data[i]['Designer'].toLowerCase();
var numHolds = data[i]['On Hold']
if (numHolds > 0) {
bodyContent += '<li class="color-2 course mix ' + designer + ' "style="background-color: #E89696";>' + courseName + statusList+ sheetLink+ '</li>';
} else if (numHolds <= 0){
bodyContent += '<li class="color-1 course mix ' + designer + ' "style="background-color: #C2D5BE";>' + courseName + statusList+ sheetLink+'</li>';
}
}
document.getElementById('courses').innerHTML = bodyContent;
document.getElementById('buttonaz').onclick = data.sort(sortAZ);
document.getElementById('buttonaz').onclick = data.sort(sortZA);
}
嗨 Stack Overflow 用户,我已经使用 tabletop.js 导入数据来显示我的大学手头的一组课程。但是,当单击“课程名称(az)”和“课程名称(za)”按钮时,我不能让它显示按字母顺序从 az 和 za 排序的课程。首次加载页面时会显示数据,但单击排序按钮时不会执行任何操作。
请帮助,任何输入将不胜感激!
PS我还使用mixitup jQuery插件按设计师的名字过滤课程。
解决方案
请参考有两个按钮的代码,一个用于排序 aZ,一个用于排序 Za。点击展开片段,你会看到两个按钮,点击它们并享受排序
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Click the buttons to sort the array alphabetically or numerically.</p>
<button onclick="myFunction1()">Sort Az</button>
<button onclick="myFunction2()">Sort zA</button>
<p id="demo"></p>
<script>
var points = ["z", "b", "d", "a"];
var data1=Array.prototype.slice.call(points);
console.log('Za Sort ',data1.sort().reverse());
document.getElementById("demo").innerHTML = points;
function myFunction1() {
points.sort();
document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
document.getElementById("demo").innerHTML = data1.sort().reverse();
}
</script>
</body>
</html>
如果传入数据是数组,则使用内置的 javascript sort() 函数对数据进行排序
var data = ["z", "b", "d", "a"];
data.sort();
console.log('Ascending order aZ ',data)
data.reverse();
console.log('Descending order zA',data);
output
Ascending order ["a", "b", "d", "z"]
Descending order["z", "d", "b", "a"]
推荐阅读
- vim - vim-go 使用环境文件:GoRun
- kubernetes - 在 AWS ec2 中从 master 创建的 3 节点集群上的 Pod 无法访问(超时)
- javascript - 地图在移动到目标位置之前在同一位置渲染 mapbox react hooks
- azure - 将单个项目从 Azure Dev Ops 发布到 Azure 应用服务环境
- python - Djongo (mongoDb) - Django 休息框架在 JsonFields 上的搜索问题
- makefile - 如何从 Makefile 为 xv6-riscv 操作系统创建 CMakeList?
- javascript - 是什么导致 this.myFunction is not a function error in this JavaScript 类?
- python - cdk python 中转网关路由表条目
- node.js - 如何将构建结果 [html 文件] 从 Jenkins 推送到 GitHub Pages?
- java - 在 websocket url 中传递凭据