JQuery Buttons and Sliders not working when created in loop
Question
Can anyone provide insight into why the slider amounts aren't updating and the button icons do not change when created through a loop? If I go through and create each slider and variable named outside of a look it works fine. Not sure why it is not working.
<!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>
Thanks!
1 answers
solution1
0 ACCPTED 2015-08-07 17:19:18
what you can do is give your slider div's a data-id attribute which you can use in the slide event to update the input values.
you can do the same for the buttons .
here's the 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>
notice the data-id and the data-buttonid attributes
then just update your js to read the data attribute and update your input values
here's the 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;
}
});
}
});
you can check this working JSFIDDLE . hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Jquery Sliders not working with angular
Jquery UI Datepicker Timepicker sliders not working when dragging
Dynamically created sliders are not working exept last one
jQuery sliders: only last slider working on page with multiple sliders
jquery hover function not working as expected on multiple sliders
JQuery hide and show functions not working for all sliders
set of volume sliders that are working together in jquery
jQuery UI Sliders hops when clicked
Combo buttons display improperly when created using jQuery
Why in the infinite loop the sliders in swiper js jump when the loop ends
Related Tags