Сортировка на основе нескольких CSS-классов и создание кода с помощью JQuery
Этот вопрос в первую очередь сосредоточен на том, как управлять кодом во время разработки, сделать его очень адаптируемым и т.д. Позвольте мне объяснить в этом примере, и это будет иметь больше смысла. "Я добавлю щедрость, если мне нужно".
Наш сервер привязан к памяти, и мы прилагаем много усилий для сортировки на стороне клиента с помощью Javascript/Jquery, чтобы облегчить эти проблемы. Вот скрипка, если вы хотите следовать за ней. https://jsfiddle.net/ydc6ywuz/23/
Проблема связана с этим кодом.
var sortSubSite = $('.AccessSitesLinks.False');
var subArr = sortSubSite.map(function(_, o){
return {
t: $(o).text(),
h: $(o).attr('href'),
c: $(o).attr('class')
};
}).get();
sortSubSite.each(function(i, o) {
var classList = $(o).attr('class').split(/\s+/);
$('.ContainingBox.AccessSitesLinks.True.'+ classList[2]).append($(o));
$(o).wrap("<div class='ContainingBox2'></div>");
$(o).text(subArr[i].t);
$(o).attr('href', subArr[i].h);
$(o).attr('class', subArr[i].c + classList[2]);
});
Каждый Home сайт будет иметь класс AccessSitesLinks True [Num]. Таким образом, все его подсайты имели бы AccessSitesLinks False [Num]. Я понимаю, что sortSubSite и SubSite похожи и могут быть объединены, чтобы быть более расширяемыми, и эта часть вопроса.
Новое деловое требование состоит в том, чтобы сортировать SubSites в алфавитном порядке. И здесь возникает вопрос. Как мне взять этот существующий код и реорганизовать его, чтобы он постоянно отвечал требованиям бизнеса? Я могу сделать код очень похожим на Home Sites, но это не кажется расширяемым, просто создавая еще одну функцию, которую нужно вызвать сразу после. У меня есть MOST переменные, массивы и функции для сортировки по алфавиту уже. Есть ли что-то, чего я не вижу с точки зрения дизайна? Это просто неопытность, которая делает это, поэтому я не могу понять, как правильно это сделать?
ИЗМЕНИТЬ
Я хочу уточнить этот вопрос. Да, я получаю объект $(o) несколько раз, и это может быть неэффективным. Этот вопрос больше связан с тем, как перепроектировать в то время, когда кодирование продолжается, так как он не является постоянно компрометирующим кодом.
Ответы
Ответ 1
$(document).ready(function() {
setFields();
});
function setFields() {
var sortSite = $('.AccessSitesLinks.True');
var arr = sortSite.map(function(_, o) {
return {
t: $(o).text(),
h: $(o).attr('href'),
c: $(o).attr('class')
};
}).get();
arr.sort(function(o1, o2) {
return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
});
sortSite.each(function(i, o) {
$(o).text('+');
$(o).attr('href', arr[i].h);
$(o).attr('class', arr[i].c);
$(o).wrap("<div class='ContainingBox " + arr[i].c + "'></div>");
/// arr[i]c is: AccessSitesLinks True
$(o).removeAttr('href');
$(o).parent().append("<a href='" + arr[i].h + "' class='" + arr[i].c + "'>" + arr[i].t + "</a>");
});
var sortSubSite = $('.AccessSitesLinks.False');
var subArr = sortSubSite.map(function(_, o) {
return {
t: $(o).text(),
h: $(o).attr('href'),
c: $(o).attr('class')
};
}).get();
// Changes started from here
subArr.sort(function(o1, o2) {
return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
});
$.each(subArr, function(i, o) {
var a = $("." + o.c.split(" ").join(".") + '[href="' + o.h + '"]');
var n = o.c.split(" ")[2];
a.appendTo($('.ContainingBox.AccessSitesLinks.True.' + n));
$(a).removeClass(n).addClass(n + n).wrap("<div class='ContainingBox2'></div>");
// Changes ended here and below commented is your code
/*var classList = $(o).attr('class').split(/\s+/);
$('.ContainingBox.AccessSitesLinks.True.'+ classList[2]).append($(o));
$(o).wrap("<div class='ContainingBox2'></div>");
$(o).text(subArr[i].t);
$(o).attr('href', subArr[i].h);
$(o).attr('class', subArr[i].c + classList[2]);*/
});
$('.ContainingBox2').hide();
$('.ContainingBox').click(function() {
$('.ContainingBox2', this).toggle(); // p00f
});
$(".ContainingBox2").on({
mouseenter: function() {
$(this).data('bg2', $(this).css("background-color"));
$(this).css("background-color", "#e5f2ff");
},
mouseleave: function() {
$(this).css("background-color", $(this).data('bg2'));
}
});
}
.ContainingBox2 {
padding: 2px 15%;
}
.AccessSitesLinks.True {
padding: 2px 2%;
font-size: 1.2em;
width: 80%;
}
.AccessSitesLinks {
text-decoration: none !Important;
font-family: "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
color: #444;
font-size: 1em;
width: 80%;
margin: 2px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="#" onclick="location.href='https://en.wikipedia.org'; return false;" id="GUID" class="AccessSitesLinks True 1">Wikipedia Home</a>
<a href="#" onclick="location.href='https://en.wikipedia.org/wiki/Gold'; return false;" id="GUID" class="AccessSitesLinks False 1">Wikipedia Gold</a>
<a href="#" onclick="location.href='https://google.com'; return false;" id="GUID" class="AccessSitesLinks True 2">Google Home</a>
<a href="#" onclick="location.href='https://mail.google.com/'; return false;" id="GUID" class="AccessSitesLinks False 2">Google Mail</a>
<a href="#" onclick="location.href='https://facebook.com/User1'; return false;" id="GUID" class="AccessSitesLinks False 3">FaceBook User1</a>
<a href="#" onclick="location.href='https://facebook.com'; return false;" id="GUID" class="AccessSitesLinks True 3">FaceBook Home</a>
<a href="#" onclick="location.href='https://facebook.org/about'; return false;" id="GUID" class="AccessSitesLinks False 3">FaceBook About</a>
<a href="#" onclick="location.href='https://young.com'; return false;" id="GUID" class="AccessSitesLinks False 2">zzzzzz</a>
<a href="#" onclick="location.href='https://younger.com'; return false;" id="GUID" class="AccessSitesLinks True 0">A</a>
<a href="#" onclick="location.href='https://youngest.com'; return false;" id="GUID" class="AccessSitesLinks False 0">zzzzzz</a>
<a href="#" onclick="location.href='https://facebook.com/a'; return false;" id="GUID" class="AccessSitesLinks False 3">FaceBook a</a>
</div>
