[英]How to fix Range on jQuery-UI slider and trigger function on hange
I have a basic form that calculates an estimated price based on quantity and one of three options. 我有一个基本表格,可以根据数量和三个选项之一来计算估计价格。 Then I tried to add a jQuery-UI slider. 然后,我尝试添加一个jQuery-UI滑块。 I need the slider to use the same values as the SELECT, in this case 10-100 but instead it seems to be using 19-109. 我需要滑块使用与SELECT相同的值,在本例中为10-100,但似乎使用的是19-109。 This means I can't select the lowest value at all without using the SELECT and the max is right off the scale. 这意味着我完全不能不使用SELECT来选择最小值,而最大值恰好在刻度上。 I also need it to trigger my setAmount() function on slider change to update the price. 我还需要它来触发我的setAmount()函数,以更改滑块以更新价格。 I thought these would be easy to resolve but I'm still learning. 我认为这些问题很容易解决,但我仍在学习。 I've included a jsfiddle and would be very appreciative if anyone could point me in the right direction. 我提供了一个jsfiddle,如果有人能指出正确的方向,我将不胜感激。
Current Code: 当前代码:
<script type='text/javascript'>
$(document).ready(function(){
var select = $( "#quantity" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 10,
max: 100,
range: "min",
value: select[ 0 ].selectedIndex + 1,
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
}
});
$( "#quantity" ).on( "change", function() {
slider.slider( "value", this.selectedIndex + 1 );
});
$('.containing-element').children().on("change", function () {setAmount();});
$("#quantity").on("change", function () {setAmount();});
});
</script>
https://jsfiddle.net/Bestrafung/2cwp9ud6/1 https://jsfiddle.net/Bestrafung/2cwp9ud6/1
I believe you are getting incorrect behavior by using the selectedIndex
from the #quantity
select. 我相信您使用#quantity
选择中的selectedIndex
会得到不正确的行为。
$(document).ready(function(){
var select = $( "#quantity" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
range: "min",
value: 10,
min: 10,
max: 100,
slide: function( event, ui ) {
select.val( ui.value );
},
change: function(event, ui){
setAmount();
}
});
$('.containing-element').children().on("change", function () {
setAmount();
});
select.on("change", function () {
setAmount();
slider.slider( "value", select.val() );
});
function setAmount(){
var a = select.val();
if (a <= 10){var q = 9.50}
else if (a > 10 && a <= 20){var q = 7.5}
else if (a > 20 && a <= 50){var q = 4.25}
else if (a > 50 && a <= 100){var q = 2.50}
if ($("#flip-min").val() == "noback") {$("#amount").val((a*q).toFixed(2));}
if ($("#flip-min").val() == "hookback") {$("#amount").val((a*(q+.5)).toFixed(2));}
if ($("#flip-min").val() == "stickyback") {$("#amount").val((a*(q+.6)).toFixed(2));}
}
});
This should correct the behavior by using ui.value and modifying the select. 这应该通过使用ui.value并修改选择来纠正行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.