Опрос - Сортировка опроса

Рейтинг: 0Ответов: 1Опубликовано: 17.04.2015

    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>

Элементы должны сортироваться по убыванию или по возрастанию, но все летит к чертям после нескольких нажатий.. подскажите в чем проблема?

Ответы

▲ 1

Проблема скорее всего скрылась в

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);
}

Там скорее всего нужно сперва построить список что за чем идет, а потом уже построить его.

К тому же target - массив установленных значений если я не ошибаюсь, а elems[key] это № по порядку элемента. В target значения могут повторятся.