javascript - 如何修复 jQuery-UI slider 上的范围和 hange 上的触发功能

Question

我有一个基本表格，可以根据数量和三个选项之一计算估计价格。然后我尝试添加一个 jQuery-UI slider 。我需要 slider 使用与 SELECT 相同的值，在本例中为 10-100，但它似乎使用的是 19-109。这意味着我不能在不使用 SELECT 的情况下选择最低值，而最大值恰好超出范围。我还需要它在 slider 更改时触发我的 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 和修改选择来纠正行为。