javascript - 控制一个 Jquery Mobile slider

Question

我想让用户选择一定数量的美元并显示等值的欧元(或相反)，我正在使用 JQuery Mobile/PHP 页面，并且正在考虑使用两个 slider ，一个用于欧元，一个用于欧元对于美元，每当用户更改一个 slider 的值时，另一个 slider 也会相应更改。有谁知道怎么做吗？

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