我正在尝试计算在右列中拖动的元素的总数。这是可行的，但它只是计算该列中的两个默认元素。如果我拖动新项目，总数保持不变。我做了这个小提琴：https://jsfidle.net/ehkgcnyp/
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
// Calculate badges
var sum = 0.0;
$('#sortable2 .badge-pill').each(function() {
sum += parseFloat($(this).text());
});
//alert(sum);
$('#getTotal').click(function() {
$('#grandTotal').html(sum);
});
});
我如何考虑新项目？
谢谢！
问题是当页面被加载时计算结果，而不是当你点击按钮时计算结果。
我将您的代码修改为：
function sum() {
var sum = 0.0;
$('#sortable2 .badge-pill').each(function() {
sum += parseFloat($(this).text());
});
return sum;
}
//alert(sum);
$('#getTotal').click(function() {
$('#grandTotal').html(sum());
});
演示
null
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
// Calculate badges
function sum() {
var sum = 0.0;
$('#sortable2 .badge-pill').each(function() {
sum += parseFloat($(this).text());
});
return sum;
}
//alert(sum);
$('#getTotal').click(function() {
$('#grandTotal').html(sum());
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul id="sortable1" class="connectedSortable list-group">
<li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 1 <span class="badge badge-primary badge-pill">12</span></li>
<li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 2 <span class="badge badge-primary badge-pill">12</span></li>
<li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 3 <span class="badge badge-primary badge-pill">12</span></li>
<li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 4 <span class="badge badge-primary badge-pill">12</span></li>
</ul>
</div>
<div class="col-sm-6">
<ul id="sortable2" class="connectedSortable list-group">
<li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Drag items here</li>
<li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 4 <span class="badge badge-primary badge-pill">12</span></li>
<li class="ui-state-default list-group-item d-flex justify-content-between align-items-center">Item 5 <span class="badge badge-primary badge-pill">12</span></li>
</ul>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-6 offset-sm-6">
<div class="d-flex justify-content-between">
<button id="getTotal" type="button" name="button" class="calculate btn btn-primary btn-lg">Calculate</button>
<h2 id="grandTotal">0</h2>
</div>
</div>
</div>
</div>