Опрос - Сортировка опроса
var btn = document.getElementsByClassName('btn');
var thumb = document.getElementsByClassName('thumb');
var progress = document.getElementsByClassName('progress');
var wrap = document.getElementById('wrap');
var elems = [];
var progressArr = [];
var intN = [];
var total = 0;
var result = 0;
for (var i = 0; i < btn.length; i++) {
progressArr.push(progress[i]);;
generateObj(btn[i], 0);
btn[i].onclick = function() {
changeN(this);
}
}
function generateObj(elem, i) {
elems.push(elem);
elems[elems.length - 1].n = 0;
}
function changeN(elem) {
var sum = 0;
intN = [];
for (var key in elems) {
if (elems[key] == elem) {
elems[key].n += 1;
}
}
for (var i = 0; i < elems.length; i++) {
sum += elems[i].n;
intN.push(elems[i].n);
}
total = sum;
changeWidth();
}
function changeWidth() {
for (var i = 0; i < thumb.length; i++) {
result = Math.floor((intN[i] * 100) / total);
thumb[i].innerHTML = result + "%";
thumb[i].style.width = (result * 500) / 100 + "px";
}
sortable(intN.slice());
}
function sortable(target) {
target.sort(function(a, b) {
return b - a;
});
while (target.length > 0) {
for (var key in elems) {
if (elems[key].n == target[0]) {
wrap.appendChild(progress[key]);
}
}
target.splice(0, 1);
}
console.log(intN, target);
}
function debug() {
console.log(intN, total);
}
#wrap {
position: relative;
top: 50px;
background: #eee;
padding: 10px;
width: 570px;
}
.thumb {
display: inline-block;
background: #3498db;
width: 500px;
text-align: center;
border-radius: 2px;
color: #fff;
font-family: arial;
}
.progress {
margin-top: 10px;
}
<button class="btn" id="btn1">Button 1</button>
<button class="btn" id="btn1">Button 2</button>
<button class="btn" id="btn1">Button 3</button>
<button class="btn" id="btn1">Button 4</button>
<div id="wrap">
<div class="progress" id="1">
<span>Button 1: </span>
<div class="thumb">1%</div>
</div>
<div class="progress" id="2">
<span>Button 2: </span>
<div class="thumb">2%</div>
</div>
<div class="progress" id="3">
<span>Button 3: </span>
<div class="thumb">3%</div>
</div>
<div class="progress" id="4">
<span>Button 4: </span>
<div class="thumb">4%</div>
</div>
</div>
Элементы должны сортироваться по убыванию или по возрастанию, но все летит к чертям после нескольких нажатий.. подскажите в чем проблема?
Источник: Stack Overflow на русском