jQuery Mobile双范围滑块工作，但有缺陷

jQuery Mobile dual range slider working but buggy

本文关键字：工作 有缺陷 Mobile 范围 jQuery      更新时间：2023-09-26

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

此外，javascript的设置使左手拇指不会超过右手拇指。

然而，这个函数有点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');  
    }
});

请在此处查看

修改脚本部分如下：

$('#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_mine值应保持在slider.max值。类似地，如果slider_max值低于slider_min值，则slider_maxvalue应保持在slider_minvalue。这些都在相应的if语句

中处理

我认为滑块应该这样工作：

http://jsfiddle.net/NkjQr/387/

我更新了http://jsfiddle.net/NkjQr/12/使用jQuery Mobile 1.2，示例似乎仍然运行良好：http://jsfiddle.net/fbGV4/1/

                    <a class='filename' target="_blank" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" title="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">

我更新了当前的js fiddle，使其可以使用无限的滑块句柄，并更新到jQuery mobile 1.3.1。请在下面查看。

http://jsfiddle.net/NkjQr/1781/

使用Jquery 1.9.1和Jquery Mobile 1.3.1 进行测试

html

<div class="priceRangeInfo">
      <label for="buying_slider_min">Price</label>
          <input type="range" name="buying_slider_1" id="buying_slider_1" slider="1" class="BuyingSlider " value="0" min="0" max="100" />
          <input type="range" name="buying_slider_2" id="buying_slider_2" slider="2" class="BuyingSlider" value="80" min="0" max="100" data-track-theme="e"/>
          <input type="range" name="buying_slider_3" id="buying_slider_3" slider="3" class="BuyingSlider" value="100" min="0" max="100" data-track-theme="e"/>
</div>

Javascript

var handles = 3;
$('.BuyingSlider').change(function() {
    var currentval = parseInt($(this).attr("slider"));
    if(currentval == 1){
        var min_num = 1;
        var min = 0;
    }else{
        var min_num = currentval-1;
        var min = parseInt($('#buying_slider_'+min_num).val());
    }
    if(currentval == handles){
        var max_num = handles;
        var max = 100;
    }else{
        var max_num = currentval+1;
        var max = parseInt($('#buying_slider_'+max_num).val());
    }
    var current = parseInt($('#buying_slider_'+currentval).val());
    if (current > max) {
        $(this).val(max);
        $(this).slider('refresh');
    }
    if (current < min) {
        $(this).val(min);
        $(this).slider('refresh');
    }
});

CSS

.ui-slider-track{
    width: 300px;
}
.priceRangeInfo{
    position: relative;
    height: 30px;
    margin-top: 60px;
}
.priceRangeInfo label{
    position: absolute;
    top: -30px;
    left: 10px;
}                            /* moves label field */
.priceRangeInfo #buying_slider_1{
    top: -40px;
    position: absolute;
    left: 100px;
}       /* moves first input field */ 
.priceRangeInfo #buying_slider_2{
    top: -40px;
    position: absolute;
    left: 170px;
} 
.priceRangeInfo #buying_slider_3{
    top: -40px;
    position: absolute;
    left: 240px;
}      /* move second input field */ 
.priceRangeInfo div.ui-slider{
    position: absolute;
}                   /* move both sliders - adressing 1st slider with CSS is hard */ 
.priceRangeInfo div:last-child{
    position: absolute;
    left: 0px;
}
相关文章：