Question

几周前我遇到了一个问题，我希望根据两个列表的值来填充两个进度条，这两个列表将列表项排序到第三个列表中。这是一个很好的结果：

Fill progress bars based on items in list

这是工作示例的JSFiddle：https://jsfiddle.net/3b69frvy/

现在我想克隆三个列表，两个进度条及其功能，以便在另一个div中显示。我试图相应地重命名所有内容，但在我这样做后，进度条不再填满，这可以在这个JSFiddle中看到：https://jsfiddle.net/es3wsxet/

Code see JSFiddle

有人可以帮我克隆进度条功能吗？最佳结果将是这些结构中的两个彼此相邻：）

Answer 1

只需使用此HTML

即可

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

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

<ul id="listA_2" class="testtable">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_2" class="testtable">List B
</ul>

<ul id="listC_2" class="testtable">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>

这个JS

var step = 25;
var current = {
  'listA_2': parseInt($('.listA_2progress').val()),
  'listC_2': parseInt($('.listC_2progress').val())
};
var maxValues = {
  'listA_2': parseInt($('.listAprogress').attr('max')),
  'listC_2': parseInt($('.listCprogress').attr('max'))
};

$("#listA_2,#listC_2").on('click', 'li', function() {
  if (current['listA_2'] >= maxValues['listA_2'] || current['listC_2'] >= maxValues['listC_2']) {
    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_2').append(thisli);
  $(this).hide();
  updateProgress(prev_id, step);
});

$('#listB_2').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]);
}

您忘了重命名进度条的类名

更新进度条可伸缩性

1 个答案: