javascript - jQuery Mobile 双范围 slider 工作但有问题

Question

我能够通过在 jQuery Mobile 框架上将 slider 放置在彼此之上来制作双范围 slider 。

还设置了 javascript，以便左拇指不会超过右拇指。

但是这个函数有点问题，我想知道是否有人对这个问题有好的解决方案。

下面是一个例子:

$('#buying_slider_min').change(function() {
    var min = $(this).val();
    var max = $('#buying_slider_max').val();
    if(min > max) {
      $('#buying_slider_max').val(min);
      $('.maxBuyingSlider').slider('refresh');  
    }
});
$('#buying_slider_max').change(function() {
    var min = $('#buying_slider_min').val();
    var max = $(this).val();
    if(min > max) {
      $('#buying_slider_min').val(max);
      $('.minBuyingSlider').slider('refresh');  
    }
});

Check it HERE

Answer 1

修改脚本部分如下:

$('#buying_slider_min').change(function() {
    var min = parseInt($(this).val());
    var max = parseInt($('#buying_slider_max').val());
    if (min > max) {
        $(this).val(max);
        $(this).slider('refresh');
    }
});
$('#buying_slider_max').change(function() {
    var min = parseInt($('#buying_slider_min').val());
    var max = parseInt($(this).val());

    if (min > max) {
        $(this).val(min);
        $(this).slider('refresh');
    }
});

更新 fiddle - http://jsfiddle.net/NkjQr/12/

编辑 - 代码解释:

1) 使用 val() 方法获取的 slider 的值是一个字符串，之前您正在比较这些字符串，其中您应该比较数字。由于比较了字符串，因此代码不是按应有的方式工作。将字符串转换为数字，然后进行最小值和最大值比较。

2) 如果 slider_min 值超出 slider_max 值，slider_min 值应保持在 slider_max 值。类似地，如果 slider_max 值低于 slider_min 值，slider_max 值应保持在 slider_min 值。这些在各自的 if 中处理 语句