jQuery Mobile双范围滑块工作但有问题

Question

我可以通过在jQuery Mobile框架上将滑块放在彼此的顶部来制作双范围滑块.

此外,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');  
    }
});

在这里查看

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');
    }
});

更新小提琴 - http://jsfiddle.net/NkjQr/12/

编辑 - 代码说明:

1)使用val()方法获取的滑块的值是一个字符串,之前您正在比较这些字符串,其中您应该比较数字.由于比较了字符串,代码无法按照应有的方式工作.将字符串转换为数字和然后做了最小和最大比较.

2)如果slider_min值超出slider_max值,slider_min值应在slider_max value.Similarly保持如果slider_max值下slider_min值推移,slider_max值应在slider_min value.These保持相应内进行处理if的语句