我在为每个循环更新DOM时遇到了问题。
在下面的代码中，$（this）.val（updated_value）.slider（'refresh'）;不工作。
我正在尝试循环访问类entry_percent中的所有滑块值并更新显示值（不包括当前选定的滑块）。只有当前选定的内容正在更新。
这是有问题的循环（注释掉了我尝试过的一些内容）：
var sliders = $('.entry_percent').not(this);
//iterate through each input and add to sum
$(sliders).each(function() {
var current_value = parseFloat(this.value);
console.log('Current slider value: ' + current_value);
var updated_value = (current_value / slider_sum) * remaining_percent;
console.log('Updated slider value: ' + updated_value);
//$(this).slider('value', updated_value);
//$(this).slider('refresh');
$(this).val(updated_value).slider('refresh');
});
这是完整的代码......
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page">
<!-- entry points table -->
<section id="entry_points_section">
<div class="input_fields_wrap">
<table class="responsive" id="input_entries_table">
<tbody>
<tr>
<th scope="col" id="entry_price_column">Entry price</th>
<th scope="col">Percent</th>
<th scope="col">Order amount</th>
<th scope="col">Capital value</th>
<th scope="col">Breakeven</th>
<th scope="col"></th>
</tr>
<tr>
<td width="17%" style="min-width:3em" ><input type="number" class = "entryprice_class" id="entryprice_1" size="5" min="0" placeholder="0" value="0"></td>
<td style="min-width:2em"><input type="range" name="slider-fill_1" class= "entry_percent" id="entry_percent_1" value="50" placeholder="50%" min="0" max="100"
data-highlight="true"/></td>
<td width="17%" style="min-width:3em"><input type="text" class="order_amount" name="order_amount_name" size="5" min="0" placeholder="0" length="10px" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class ="capital_value" name="capital_value" size="5" min="0" placeholder="0" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class ="breakeven" name="breakeven" size="5" min="0" placeholder="0" disabled></td>
<td width="28px" style="display:none" ><button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true" > </button></td>
</tr>
<tr>
<td width="17%" style="min-width:3em" ><input type="number" class = "entryprice_class" name="entryprice" id="entryprice_2" size="5" min="0" placeholder="0" value="0"></td>
<td style="min-width:2em"><input type="range" name="slider-fill" class= "entry_percent" id="entry_percent_2" value="50" placeholder="50%" min="0" max="100"
data-highlight="true"/></td>
<td width="17%" style="min-width:3em"><input type="text" class="order_amount" name="order_amount" size="5" min="0" placeholder="0" length="10px" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class ="capital_value" name="capital_value" size="5" min="0" placeholder="0" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class ="breakeven" name="breakeven" size="5" min="0" placeholder="0" disabled></td>
<td width="28px"><a href="#" class="remove_field">
<button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true"> </button>
</a></td>
</tr>
</tbody>
</table>
<table class="responsive" id="totals_table">
<tbody>
<tr>
<th scope="col">Totals: </th>
<th scope="col">Total order amount</th>
<th scope="col">Cummulative breakeven</th>
<th scope="col"></th>
</tr>
<tr>
<td width="17%" style="min-width:3em" ><input type="number" class = "entryprice_totals" name="entryprice_totals" id="entryprice_totals_1" size="5" min="0" placeholder="0" value="0"></td>
<td style="display:none;min-width:2em" ><input type="range" name="slider-fill" value="50" placeholder="50%" min="0" max="100"
data-highlight="true"/></td>
<td width="17%" style="min-width:3em"><input type="text" class="order_amount_totals" name="order_amount_totals_name" id="order_amount_totals_id" size="5" min="0" placeholder="0" length="10px" disabled></td>
<td width="17%" style="min-width:3em"><input type="text" class ="breakeven_totals_class" name="breakeven_totals" size="5" min="0" placeholder="0" disabled id="break_even_totals_id"></td>
<td width="28px" style="display:none" ><button data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true" > </button></td>
</tr>
</tbody>
</table>
</div>
<div class="ui-grid-solo">
<div class="ui-block-a">
<div>
<button id='add_new_entry_button' data-icon="plus" data-inline="false">Add</button>
</div>
</div>
</div>
</section>
</div>
<!-- /content -->
</div>
<!-- /page -->
<script>
$(document).ready(function () {
// ================= calculate sliders ==================
var entry_percent_class = $('.entry_percent');
var previous_value = 50;
var remaining_percent;
var change = 0;
$(".entry_percent").live("slidestop",function(){
if ($(this).data("oldvalue")!==undefined) {
previous_value = $(this).data("oldvalue");
}
$(this).data("oldvalue",$(this).val());
//console.log('Slide stop previous value:'+ previous_value);
});
$(".entry_percent").live("slidestart",function(){
if ($(this).data("oldvalue")!==undefined)
previous_value = $(this).data("oldvalue");
//console.log("Slide start prev value: "+ previous_value);
});
entry_percent_class.live('focus', function() { // if the user inputs a number in the slider box, capture the number before it's changed.
if ($(this).data("oldvalue")!==undefined) {
previous_value = $(this).data("oldvalue");
}
previous_value = $(this).val();
//console.log('Focus event'+ previous_value);
});
entry_percent_class.live('change', function(e) {
var current_value = $(this).val();
var slider_sum = 100 - previous_value;
var remaining_percent = 100 - current_value;
console.log('Slider sums (exluding current): ' + slider_sum);
console.log('Remaing: ' + remaining_percent);
// iterate through sliders & change them, excluding the current slider
var sliders = $('.entry_percent').not(this);
//iterate through each input and add to sum
$(sliders).each(function() {
var current_value = parseFloat(this.value);
console.log('Current slider value: ' + current_value);
var updated_value = (current_value / slider_sum) * remaining_percent;
console.log('Updated slider value: ' + updated_value);
//$(this).slider('value', updated_value);
//$(this).slider('refresh');
$(this).val(updated_value).slider('refresh');
});
});
});
</script>
</body>
</html>