jQuery slider - slide: function (event, ui) in for loop
Question
I have a simple code with 2 (or more) jQuery sliders:
HTML:
<label for="ST">ST:</label>
<input type="text" id="ST" value="10">
<div id="slider-ST"></div>
<label for="DX">DX:</label>
<input type="text" id="DX" value="10">
<div id="slider-DX"></div>
and JS:
$function(){
$( "#slider-ST" ).slider({
orientation: "horizontal",
range: "min",
value: 10,
slide: function (event, ui) {sliderChange(ui,"#ST");}
});
$( "#slider-DX" ).slider({
orientation: "horizontal",
range: "min",
value: 10,
slide: function (event, ui) {sliderChange(ui,"#DX");}
});
function sliderChange(t, disp)
{
$(disp).val(t.value);
};
}
It works perfectly well.
Now, I want to make it nicer and I would like to call these functions in a for loop:
$function(){
var ID_Inp = ["#slider-ST", "#slider-DX"];
var ID_Sli = ["#ST", "#DX"];
var i;
for (i=0;i<ID_Inp.length;i++)
{
$(ID_Inp[i]).slider({
orientation: "horizontal",
range: "min",
min: 1,
max: 18,
value: 10,
slide: function (event, ui) {sliderChange(ui,ID_Sli[i]);}
});
};
function sliderChange(t, disp)
{
$(disp).val(t.value);
};
}
Simplified code also available at jsfiddle:
And what happens is, that i is set to 2 after changing the slider's value and obviously function sliderChange doesn't work properly ( ID_Sli[i] is undefined ).
Any ideas?
3 answers
solution1
0 2017-07-05 09:43:33
For loop is not good option for this , I think you need to do like following:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $("#slider-range-max-cars,#slider-range-max-beds").slider({ range: "max", value: 2, slide: function(event, ui) { $("#amountcars").val($("#slider-range-max-cars").slider("value")); $("#amountbeds").val($("#slider-range-max-beds").slider("value")); } }); $("#amountcars").val($("#slider-range-max-cars").slider("value")); $("#amountbeds").val($("#slider-range-max-beds").slider("value")); }); </script> <body> <label for="beds">Minimum number of bedrooms:</label> <input type="text" id="amountbeds"> <div id="slider-range-max-beds"></div> <p> <label for="cars">Minimum number of cars:</label> <input type="text" id="amountcars"> <div id="slider-range-max-cars"></div> <div id="debug"> </div> </body> </html>
For more information read documention
solution2
0 ACCPTED 2017-07-05 09:58:30
I'm not sure why you'd need to use a for loop in this situation, this could be simplified. Expanding on Govind's idea, if you encapsulate the Sliders & Inputs into individual Div's:
<div id="bedsSection">
<input type="text" id="amountbeds">
<div id="slider-range-max-beds"></div>
</div>
Following this, using the same event, you could then query the parent to find the relevant input. Update accordingly.
$( "#slider-range-max-beds, #slider-range-max-cars" ).slider({
range: "max",
value: 2,
slide: function( event, ui ) {
var input = $(this).parent().find("input");
input.val( ui.value );
//Could also be written as $(this).parent().find("input").val(ui.value);
}
});
solution3
0 2017-07-05 13:33:40
Dear Ramakanth,
Thank you for your answers. Thanks to those, I compiled the code that works well (and kind-of uses for , so I don't have to manually type in IDs in initialization phase):
<div class="params">
<div id="STSection">
<label for="ST">Strength:</label>
<input type="text" id="ST" value="10">
<div id="slider-ST" style="width:300px;"></div>
</div>
<div id="DXSection">
<label for="DX">Dexterity:</label>
<input type="text" id="DX" value="11">
<div id="slider-DX" style="width:300px;"></div>
</div>
and JS:
$('.params div').each(function() {
$(this).find("div").slider({
value: $(this).find("input").val(),
orientation: "horizontal",
slide: function( event, ui ) {
$(this).parent().find("input").val(ui.value);
}
});
});
The most important part for me to understand was how to work with .each() that are embedded into div sections. Then obviously to use parent() and find() . Those are really helpful!
Thank you!
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.