javascript - 通过以下方式控制一个 Jquery Mobile 滑块

Question

我想让用户选择一些美元并显示等值的欧元（或相反），我正在使用 JQuery Mobile/PHP 页面并正在考虑使用两个滑块，一个用于欧元，一个用于美元和每当用户更改一个滑块的值时，另一个滑块也会相应更改。任何人都知道如何做到这一点？

<div id="content">
        <form action="" method="POST">
            <div data-role="fieldcontain">
                <label for="slider1">
                    USD
                </label>
                <input id="slider1" type="range" name="slider" value="50" min="0" max="100"
                data-highlight="false">
            </div>
            <div data-role="fieldcontain">
                <label for="slider2">
                    EUR
                </label>
                <input id="slider2" type="range" name="slider" value="50" min="0" max="100"
                data-highlight="false">
            </div>
        </form>
</div> <!-- end #content -->

Answer 1

几个月前我做了类似的东西。

看看这个工作示例并将其用于自己：http: //jsfiddle.net/Gajotres/PzTeX/

$(document).on("slidestop", "input#us, input#uk, input#japan",function() {
    $(this).mouseup();
    var changeVal = ($(this).val() - $(this).attr('min'))/($(this).attr('max') - $(this).attr('min'));
    changeSliders(changeVal, $(this).attr('id'));    
});

function changeSliders(changeVal, sliderID){
    $("input#us, input#uk, input#japan").each(function(){
        var newValue = parseFloat($(this).attr('min')) + parseFloat(($(this).attr('max') - $(this).attr('min')))*changeVal;
        if($(this).attr('id') != sliderID) {    
            $(this).val(newValue);
        }
    });
    $("input#europe, input#us, input#uk, input#japan").slider('refresh');    
}