<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
我有三个列表 A、B 和 C。
列表 A 和 C 包含通过点击填充到列表 B 中的 li 项。这是它目前的样子:
https://jsfiddle.net/3ds06kf0/92/
现在我想使用两个 HTML5 条来指示“已填充”列表 B 的状态。
从左到右填充的第一个栏代表列表 A 中的“已填充元素”，从右到左填充的第二个栏代表列表 C 中的“已填充元素” 。
每次将列表之一中的元素移动到列表 B 时，相应的进度条应该填充一个设定的量，比方说 10%。如果达到进度条的最大值(当前设置为 100)，则不再可能从完整进度条的列表中将元素填充到列表 B 中。
如果这也能向后工作，那就太好了，所以无论何时从列表 B 中删除一个元素，都应该从相应的进度条中减去该值。
有没有人知道如何处理这个问题？在此先感谢您的帮助!
PS:我已经将两个进度条的当前值设置为10%，以显示颜色和方向!
最佳答案
如果我没理解错的话，这是行得通的。我将可配置的步骤设置为 25，以便能够在您的示例中达到最大值:
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>关于jquery - 根据列表中的元素填充进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49939725/