我有一个点击功能,可以在点击时显示英语,数学,科学和社会研究的分数。我希望从.school
的最高到最低顺序排列该主题中的最高百分比。
.sort()
或isotope.js
$(".btn").click(function(){
$(".btn").removeClass("is-selected");
$(this).addClass("is-selected");
// Button behavior
if ($(this).hasClass("btn-english")) {
$(".school__percentage").each(function(i, element) {
$(element).html(schools[i].percentEnglish);
});
} else if ($(this).hasClass("btn-math")) {
$(".school__percentage").each(function(i, element) {
$(element).html(schools[i].percentMath);
});
} else if ($(this).hasClass("btn-science")) {
$(".school__percentage").each(function(i, element) {
$(element).html(schools[i].percentScience);
});
} else if ($(this).hasClass("btn-social")) {
$(".school__percentage").each(function(i, element) {
$(element).html(schools[i].percentSocial);
});
}
});
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%"
}
的index.html
<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>
答案 0 :(得分:1)
这应该可以帮到你。如果您有任何问题,请告诉我们!
var schools = [{
"name": "School 1",
"district": "Maplewood Richmond Heights",
"crest": "src/img/crest-affton.jpg",
"location": "",
"percentEnglish": "1%",
"percentMath": "21%",
"percentScience": "41%",
"percentSocial": "61%"
}, {
"name": "School 2",
"district": "Maplewood Richmond Heights",
"crest": "src/img/crest-affton.jpg",
"location": "",
"percentEnglish": "61%",
"percentMath": "11%",
"percentScience": "31%",
"percentSocial": "81%"
}, {
"name": "School 3",
"district": "Maplewood Richmond Heights",
"crest": "src/img/crest-affton.jpg",
"location": "",
"percentEnglish": "13%",
"percentMath": "28%",
"percentScience": "49%",
"percentSocial": "55%"
}, ];
function sortBySubject(schools, subject, descending) {
descending = descending || false;
if (!schools || !subject) {
var orderedSchools = [];
return orderedSchools;
}
var orderedSchools = schools.slice().sort(function(elem1, elem2) {
var value1 = Number(elem1["percent" + subject].replace(/[^\d.]/g, "")),
value2 = Number(elem2["percent" + subject].replace(/[^\d.]/g, ""));
if (descending) {
// descending
return value1 === value2 ? 0 : +(value1 < value2) || -1;
}
// ascending
return value1 === value2 ? 0 : +(value1 > value2) || -1;
});
return orderedSchools;
}
console.log(sortBySubject(schools, "English", true));
&#13;
$(function() {
var schools = [{
"name": "School 1",
"district": "Maplewood Richmond Heights",
"crest": "src/img/crest-affton.jpg",
"location": "",
"percentEnglish": "1%",
"percentMath": "21%",
"percentScience": "41%",
"percentSocial": "61%"
}, {
"name": "School 2",
"district": "Maplewood Richmond Heights",
"crest": "src/img/crest-affton.jpg",
"location": "",
"percentEnglish": "61%",
"percentMath": "11%",
"percentScience": "31%",
"percentSocial": "81%"
}, {
"name": "School 3",
"district": "Maplewood Richmond Heights",
"crest": "src/img/crest-affton.jpg",
"location": "",
"percentEnglish": "13%",
"percentMath": "28%",
"percentScience": "49%",
"percentSocial": "55%"
}, ];
function sortBySubject(schools, subject, descending) {
descending = descending || false;
if (!schools || !subject) {
var orderedSchools = [];
return orderedSchools;
}
var orderedSchools = schools.slice().sort(function(elem1, elem2) {
var value1 = Number(elem1["percent" + subject].replace(/[^\d.]/g, "")),
value2 = Number(elem2["percent" + subject].replace(/[^\d.]/g, ""));
if (descending) {
// descending
return value1 === value2 ? 0 : +(value1 < value2) || -1;
}
// ascending
return value1 === value2 ? 0 : +(value1 > value2) || -1;
});
return orderedSchools;
}
$(".widget__buttons button").on("click", function() {
var subject = $(this).text();
var orderedSchools = [];
switch (subject) {
case "Social Studies":
{
subject = "Social";
break;
}
}
orderedSchools = sortBySubject(schools, subject, true);
$(".schools").empty();
orderedSchools.forEach(function(elem, index) {
var $school = $(".school.clone").clone(true);
$school.removeClass("clone");
$school.attr("data-id", (index + 1));
$school.find(".school__image").attr("src", elem.crest);
$school.find(".school__name").text(elem.name);
$school.find(".school__district").text(elem.district);
$school.find(".school__percentage").text(elem["percent" + subject]);
$(".schools").append($school);
});
});
});
&#13;
.clone {
display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="school clone" 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="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>
<!-- schools -->
</div>
&#13;
答案 1 :(得分:0)
这应该有效:
$(".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]);
});