jQuery Mobile 双范围滑块工作但有问题 [英] jQuery Mobile dual range slider working but buggy

问题描述

我能够通过在 jQuery Mobile 框架上将滑块置于彼此之上来制作双范围滑块.

I was able to make dual range slider by placing slider on top of each other on jQuery Mobile framework.

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

Also javascript is set so that left thumb doesn't go above right one.

但是这个功能有点问题，我想知道是否有人有好的解决方案.

However that function is a bit buggy and I was wondering if anyone had a good solution to this problem.

下面是一个例子:

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

在这里查看

推荐答案

修改脚本部分如下:

$('#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() 方法获取的滑块值是一个字符串，之前您正在比较这些字符串，其中您应该比较数字.由于比较了字符串，因此代码不是按照应有的方式工作.将字符串转换为数字，然后进行最小值和最大值比较.

1) The value of the slider taken using val() method is a string and earlier you were comparing those strings,wherein you should be comparing numbers.Since strings were compared,the code was not working the way it should be.Converted the strings to number and then did the min and max comparison.

2) 如果slider_min 值超过slider_max 值，slider_min 值应保持为slider_max 值.同样，如果slider_max 值低于slider_min 值，slider_max 值应保持为slider_min 值.这些在各自的if 中处理 语句

2) If slider_min value goes beyond slider_max value,slider_min value should be kept at slider_max value.Similarly if slider_max value goes under slider_min value,slider_max value should be kept at slider_min value.These are handled within the respective if statements

这篇关于jQuery Mobile 双范围滑块工作但有问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！