如何在jQuery-UI滑块上修复Range和在hange上触发函数

Question

我有一个基本表格，可以根据数量和三个选项之一来计算估计价格。 然后，我尝试添加一个jQuery-UI滑块。 我需要滑块使用与SELECT相同的值，在本例中为10-100，但似乎使用的是19-109。 这意味着我完全不能不使用SELECT来选择最小值，而最大值恰好在刻度上。 我还需要它来触发我的setAmount（）函数，以更改滑块以更新价格。 我认为这些问题很容易解决，但我仍在学习。 我提供了一个jsfiddle，如果有人能指出正确的方向，我将不胜感激。

当前代码：

<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

Answer 1

我相信您使用#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));}
  }
});

这应该通过使用ui.value并修改选择来纠正行为。