jQuery Mobile双范围滑块工作，但越野车 [英] jQuery Mobile dual range slider working but buggy

问题描述

另外设置了javascript，以便左手拇指不会放在左手拇指上在$ 1
$ b

然而，这个功能有点bug，我想知道如果有人有这个问题的一个很好的解决方案。

下面是一个例子：

  $（'＃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'） ; 
} 
}）; 
  

在此检查 / p>

  $（'＃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（$（'buy_slider_min'）。val（））; 
 var max = parseInt（$ （this）.val（））; 
 
 if（min> max）{
 $（this）.val（min）; 
 $（this）.slider（ 'refresh'）; 
} 
}）; 
  

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

编辑 - 代码解释：

1）使用 val（）方法获取的滑块的值是一个字符串，并且您之前在比较这些字符串，其中您应该比较数字。由于字符串被比较，代码没有按照应有的方式工作。将字符串转换为数字，然后进行最小和最大比较。

$ b 2）如果slider_min值超出slider_max值，slider_min值应该保持在slider_max值。类似地，如果slider_max值在slider_min值以下，slider_max值应该保持在slider_min值。如果语句

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

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.

Below is an example:

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

解决方案

Modify the script part like this:

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

Updated fiddle - http://jsfiddle.net/NkjQr/12/

Edit - Code explanation:

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) 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屋！