根据列表

Question

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

列表A和C包含通过点击填充到列表B中的li项目。目前的情况如下：

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

现在我想用两个HTML5栏来表示＆＃34;填充＆＃34;的状态。列出B。

从左到右填充的第一个栏代表＆＃34;填充的项目＆＃34;从列表A开始，从右到左填充的第二个栏代表＆＃34;填充的项目＆＃34;来自列表C。

每当其中一个列表中的某个项目移动到列表B时，相应的进度条应该按设定的金额填充，让我们说10％。如果达到一个进度条（当前设置为100）的最大值，则不再能够从完整进度条列表中将项目填充到列表B中。

如果它也会向后移动，那就太棒了，所以每当你从列表B中删除一个项目时，都应该从相应的进度条中减去该值。

有没有人知道如何处理这个问题？在此先感谢您的帮助！

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

Answer 1

如果我理解正确，这有效。我设置了一个可配置的步骤25，以便能够通过您的示例达到最大值：

map

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