Question

我想让用户选择一些美元并显示欧元等值（或者相反），我正在使用JQuery Mobile / PHP页面，并考虑使用两个滑块，一个用于EUR和一个对于USD以及每当用户更改一个滑块的值时，另一个滑块会相应地更改。谁知道怎么做？

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

控制一个Jquery Mobile滑块

1 个答案: