任何人都可以提供有关滑块数量未更新的原因以及通过循环创建时按钮图标不会更改的信息吗？如果我通过创建每个滑块和变量名称外观它可以正常工作。不知道为什么它不起作用。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
var locked = [];
var slider = [];
var i;
for (i = 0; i < 5; i++) {
$( "#slider" + i ).slider({
range: "max",
min: 0,
max: 100,
step: 0.01,
value: 20,
slide: function( event, ui ) {
$( "#amount" + i ).val( ui.value );
}
});
$( "#amount" + i ).val( $( "#slider-range-max" ).slider( "value" ) );
$( "#amount" + i ).val(20.00);
locked[i] = false;
$("#Lock" + i).button({
icons: {primary:'ui-icon-locked'},
text: false
}).click(function( event ) {
if(locked[i] == false){
$(this).button("option", {
icons: { primary: 'ui-icon-unlocked' }
});
locked[i] = true;
} else if(locked[i] == true){
$(this).button("option", {
icons: { primary: 'ui-icon-locked' }
});
locked[i] = false;
}
});
}
});
</script>
</head>
<body>
<table border='0' style="width:500px;">
<tr><td style="width:75px;">Var 1</td><td style="width:350px;"><div id="slider0"></div></td><td style="width:30px;"><input type="text" id="amount0" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock0'></td></tr>
<tr><td style="width:75px;">Var 2</td><td style="width:350px;"><div id="slider1"></div></td><td style="width:30px;"><input type="text" id="amount1" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock1'></td></tr>
<tr><td style="width:75px;">Var 3</td><td style="width:350px;"><div id="slider2"></div></td><td style="width:30px;"><input type="text" id="amount2" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock2'></td></tr>
<tr><td style="width:75px;">Var 4</td><td style="width:350px;"><div id="slider3"></div></td><td style="width:30px;"><input type="text" id="amount3" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock3'></td></tr>
<tr><td style="width:75px;">Var 5</td><td style="width:350px;"><div id="slider4"></div></td><td style="width:30px;"><input type="text" id="amount4" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;"></td><td><button id='Lock4'></td></tr>
</table>
</body>
</html>
谢谢！
答案 0 :(得分：0)
您可以为slider div提供一个data-id属性，您可以在slide事件中使用该属性来更新input值。
您可以对buttons执行相同操作。
这是html
<table border='0' style="width:500px;">
<tr>
<td style="width:75px;">Var 1</td>
<td style="width:350px;">
<div id="slider0" data-id='0'></div>
</td>
<td style="width:30px;">
<input type="text" id="amount0" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
</td>
<td>
<button id='Lock0' data-buttonid='0'>
</td>
</tr>
<tr>
<td style="width:75px;">Var 2</td>
<td style="width:350px;">
<div id="slider1" data-id='1'></div>
</td>
<td style="width:30px;">
<input type="text" id="amount1" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
</td>
<td>
<button id='Lock1' data-buttonid='1'>
</td>
</tr>
<tr>
<td style="width:75px;">Var 3</td>
<td style="width:350px;">
<div id="slider2" data-id='2'></div>
</td>
<td style="width:30px;">
<input type="text" id="amount2" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
</td>
<td>
<button id='Lock2' data-buttonid='2'>
</td>
</tr>
<tr>
<td style="width:75px;">Var 4</td>
<td style="width:350px;">
<div id="slider3" data-id='3'></div>
</td>
<td style="width:30px;">
<input type="text" id="amount3" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
</td>
<td>
<button id='Lock3' data-buttonid='3'>
</td>
</tr>
<tr>
<td style="width:75px;">Var 5</td>
<td style="width:350px;">
<div id="slider4" data-id='4'></div>
</td>
<td style="width:30px;">
<input type="text" id="amount4" readonly value='20.00' style="width:40px;border:0; color:#f6931f; font-weight:bold;">
</td>
<td>
<button id='Lock4' data-buttonid='4'>
</td>
</tr>
</table>
注意data-id和data-buttonid属性
然后只需更新您的js以读取数据属性并更新输入值
这是JS
$(function() {
var locked = [];
var slider = [];
var i;
for (i = 0; i < 5; i++) {
$("#slider" + i).slider({
range: "max",
min: 0,
max: 100,
step: 0.01,
value: 20,
slide: function(event, ui) {
var id = $(this).data('id');
$("#amount" + id).val(ui.value);
}
});
$("#amount" + i).val($("#slider-range-max").slider("value"));
$("#amount" + i).val(20.00);
locked[i] = false;
$("#Lock" + i).button({
icons: {
primary: 'ui-icon-locked'
},
text: false
}).click(function(event) {
var id = $(this).data('buttonid');
console.log($(this));
if (locked[id] == false) {
$(this).button("option", {
icons: {
primary: 'ui-icon-unlocked'
}
});
locked[id] = true;
} else if (locked[id] == true) {
$(this).button("option", {
icons: {
primary: 'ui-icon-locked'
}
});
locked[id] = false;
}
});
}
});
您可以查看此工作 JSFIDDLE 。希望这有帮助。