Javascript 从最高到最低排序项目 客观的
我有一个点击功能，可以在点击时显示英语、数学、科学和社会研究的成绩。我希望从最高到最低的Javascript 从最高到最低排序项目 客观的,javascript,jquery,sorting,jquery-isotope,Javascript,Jquery,Sorting,Jquery Isotope,我有一个点击功能，可以在点击时显示英语、数学、科学和社会研究的成绩。我希望从最高到最低的.school，在该学科中拥有最高的百分比 我想知道用这两种方法实现这一目标的最佳方式是什么 .sort（）或同位素.js scripts.js schools.js（共有20所学校） index.html <div class="widget high-school"> <div class="widget__info"> <p cl
.school- 我想知道用这两种方法实现这一目标的最佳方式是什么
或.sort（）同位素.js
<div class="widget high-school">
<div class="widget__info">
<p class="widget__category">High school</p>
<p class="widget__title">Missouri Assessment Program standouts</p>
</div>
<div class="widget__buttons">
<p class="widget__rank">Rank by:</p>
<button class="btn btn-english is-selected">English</button>
<button class="btn btn-math">Math</button>
<button class="btn btn-science">Science</button>
<button class="btn btn-social">Social Studies</button>
</div>
<div class="wrapper">
<div class="schools">
<div class="school" data-id="1">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="2">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="3">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="4">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="5">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="6">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="7">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="8">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="9">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="10">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="11">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="12">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="13">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="14">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="15">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="16">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="17">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="18">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="19">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="20">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
</div><!-- schools -->
</div>
高中
密苏里州杰出评估项目
排名依据：
英语
数学
科学类
社会科学课程
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
tk名称
tk区
-%
var学校=[{
“名称”：“学校1”，
“地区”：“枫木里士满高地”，
“crest”：“src/img/crest affton.jpg”，
“地点”：“，
“英语百分比”：“1%”，
“百分比数学”：“21%”，
“百分比科学”：“41%”，
“社会百分比”：“61%”
}, {
“名称”：“学校2”，
“地区”：“枫木里士满高地”，
“crest”：“src/img/crest affton.jpg”，
“地点”：“，
“英语百分比”：“61%”，
“百分比数学”：“11%”，
“百分比科学”：“31%”，
“社会百分比”：“81%”
}, {
“名称”：“学校3”，
“地区”：“枫木里士满高地”，
“crest”：“src/img/crest affton.jpg”，
“地点”：“，
“英语百分比”：“13%”，
“百分比数学”：“28%”，
“百分比科学”：“49%”，
“社会百分比”：“55%”
}, ];
函数sortBySubject（学校、科目、降序）{
下降=下降| |假；
如果（！学校| |！科目）{
var orderedSchools=[]；
退订学校；
}
var orderedSchools=schools.slice（）.sort（函数（elem1，elem2）{
var value1=数字（elem1[“百分比”+主题]。替换（/[^\d.]/g，”），
value2=数字（elem2[“百分比”+主题]。替换（/[^\d.]/g，”）；
如果（降序）{
//下降的
返回值1==value2？0:+（value1value2）| |-1；
var schools = [
{
"name": "Maplewood Richmond Heights",
"district": "Maplewood Richmond Heights",
"crest": "src/img/crest-affton.jpg",
"location": "",
"percentEnglish": "1%",
"percentMath": "21%",
"percentScience": "41%",
"percentSocial": "61%"
}
<div class="widget high-school">
<div class="widget__info">
<p class="widget__category">High school</p>
<p class="widget__title">Missouri Assessment Program standouts</p>
</div>
<div class="widget__buttons">
<p class="widget__rank">Rank by:</p>
<button class="btn btn-english is-selected">English</button>
<button class="btn btn-math">Math</button>
<button class="btn btn-science">Science</button>
<button class="btn btn-social">Social Studies</button>
</div>
<div class="wrapper">
<div class="schools">
<div class="school" data-id="1">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="2">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="3">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="4">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="5">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="6">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="7">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="8">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="9">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="10">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="11">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="12">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="13">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="14">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="15">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="16">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="17">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="18">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="19">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
<div class="school" data-id="20">
<img src="" class="school__image">
<div class="school__details">
<div class="school__name">tk-name</div>
<div class="school__district">tk-district</div>
</div>
<div class="school__percentage">-%</div>
</div> <!-- school -->
</div><!-- schools -->
</div>
$(".btn").click(function(){
$(".btn").removeClass("is-selected");
$(this).addClass("is-selected");
var clazz = $(this).attr("class").split(" ")[1];
var percent;
switch(clazz) {
case "btn-english" :
percent = "percentEnglish";
break;
case "btn-math" :
percent = "percentMath";
break;
case "btn-science" :
percent = "percentScience"
break;
case "btn-social" :
percent = "percentSocial";
break;
}
schools.sort(function(a, b) {
return a[percent] < b[percent];
});
$.each($(".school__percentage"), function(i, element) {
$(element).html(schools[i][percent]);
});