根据列表中的项目填充进度条 [英] Fill progress bars based on items in list

问题描述

我有三个列表A，B和C.

列表A和C包含li个项目，这些项目通过单击被填充到列表B中.当前是这样的:

Lists A and C contain li items that get filled into list B via clicks. This is how it currently looks like:

https://jsfiddle.net/3ds06kf0/92/

现在，我想使用两个HTML5栏来指示已填充"列表B的状态.

Now I want to use two HTML5 bars to indicate the status of the "filled" list B.

第一个从左到右填充的栏代表列表A中的物品已填充"，第二个从右向左填充的栏代表列表C中的物品已填充".

The first bar that fills from left to right stands for "items filled" from list A, the second bar that fills from right to left stands for "items filled" from list C.

每次将其中一个列表中的一项移至列表B中时，相应的进度条应填充一定的数量，例如10％.如果达到进度条的最大值(当前设置为100)，则应该不再可能将完整进度条列表中的项目填充到列表B中.

Every time an item from one of the lists gets moved to list B, the respective progress bar should fill up by a set amount, let's say 10%. If the max of one the progress bars (currently set to 100) is reached, it should no longer be possible to fill an item into list B from the full progress bar's list.

如果它也可以反向运行，那就太好了，因此，每当您从列表B中删除一个项目时，都应从相应的进度栏中减去该值.

It'd be great if that would work backwards as well, so whenever you remove an item from list B, the value should be substracted from the respective progress bar.

有人知道如何处理吗?预先感谢您的帮助！

Does anyone have a clue how to approach this? Thanks in advance for the help!

PS:我将两个进度条的当前值都设置为10％，以显示颜色和方向！

PS: I have set the current value of both progress bars to 10% to show the colors and directions!

推荐答案

如果我理解正确，那么可以.我将可配置的步长设置为25，以使您的示例达到最大值:

If I understood correctly, this works. I set a configurable step of 25 to be able to reach the max with your example:

var step = 25;
var current = {
  'listA': parseInt($('.listAprogress').val()),
  'listC': parseInt($('.listCprogress').val())
};
var maxValues = {
  'listA': parseInt($('.listAprogress').attr('max')),
  'listC': parseInt($('.listCprogress').attr('max'))
};

$("#listA,#listC").on('click', 'li', function() {
  if (current['listA'] >= maxValues['listA'] || current['listC'] >= maxValues['listC']) {
    alert("max reached");
    return;
  }
  var prev_id = $(this).parent().attr('id');
  var prev_index = $(this).index();

  $(this).attr('prev_id', prev_id);
  $(this).attr('prev_index', prev_index);

  var thisli = $(this).clone();
  $('#listB').append(thisli);
  $(this).hide();
  updateProgress(prev_id, step);
});

$('#listB').on('click', 'li', function() {
  var prev_id = $(this).attr('prev_id');
  var prev_index = $(this).attr('prev_index');

  $('#' + prev_id).children().eq(prev_index).show();
  $(this).remove();
  updateProgress(prev_id, -step);
});

function updateProgress(listId, step) {
  current[listId] += step;
  $('.' + listId + 'progress').val(current[listId]);
}

#listA,
#listB,
#listC {
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
}

.listAprogress,
.listCprogress {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 20px;
}

.listCprogress {
  direction: rtl;
}

.listCprogress::-webkit-progress-value {
  background-color: red;
}

ul li {
  cursor: pointer;
  color: #666;
}

ul li:hover {
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><progress class="listAprogress" max="100" value="0"></progress></div>

<div><progress class="listCprogress" max="100" value="0"></progress></div>

<ul id="listA">List A
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

<ul id="listB">List B
</ul>

<ul id="listC" class="connectedSortable">List C
  <li class="ui-state-highlight">Item 6</li>
  <li class="ui-state-highlight">Item 7</li>
  <li class="ui-state-highlight">Item 8</li>
  <li class="ui-state-highlight">Item 9</li>
  <li class="ui-state-highlight">Item 10</li>
</ul>

这篇关于根据列表中的项目填充进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！