jquery mobile moving all sliders toogether

问题

I'm trying to do a simple shoes size converter. i have update all the sliders value accordingly and i know how to get their values but i want to be able to update on change event the sliders all together.

How can i do it?

<!DOCTYPE html>
<html>
<head>
    <title>jQM Demo 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <meta name="viewport" content="width=device-width">
</head>
<body>

<div data-role="page" id="mens" data-add-back-btn="true">

    <div data-role="header">
        <h1>Men's Size</h1>
    </div>

    <div data-role="content">
        <form action="#" method="get">
            <label for="europe" class="ui-hidden-accessible">Europe:</label>
            <input type="range" name="europe" id="europe" value="38" min="38" max="47" step="0.5" data-highlight="true" data-theme="b" data-track-theme="c" orientation="vertical"/>
            <label for="us" class="ui-hidden-accessible">USA:</label>
            <input type="range" name="us" id="us" value="5.5" min="5.5" max="12.5" step="0.5" data-highlight="true" data-theme="b" data-track-theme="c" orientation="vertical"/>

            <label for="uk" class="ui-hidden-accessible">UK:</label>
            <input type="range" name="uk" id="uk" value="5" min="5" max="12" step="0.5" data-highlight="true" data-theme="b" data-track-theme="c" orientation="vertical" />

            <label for="japan" class="ui-hidden-accessible">JAPAN:</label>
            <input type="range" name="japan" id="japan" value="23.5" min="23.5" max="30.5" step="0.5" data-highlight="true" data-theme="b" data-track-theme="c" orientation="vertical" />
        </form>
    </div>

<script>
    var self = this;
    this.sliderTouchUp = function() {
        var currentVal = $('#europe').val();
        console.log("val change to " + currentVal);
    };
    $('.ui-slider').live('mouseup', self.sliderTouchUp);
    $('.ui-slider').live('touchend', self.sliderTouchUp);

</script>

<div data-role="footer">

</div>
</div>

</body>
</html>

回答1:

this should do it, test it please and tell me is this what you wanted all along:

   $("input#europe, input#us, input#uk, input#japan").live("slidestop", 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#europe, 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');    
   }

You can add as much sliders you want, you just need to add/remove elements here:

$("input#europe, input#us, input#uk, input#japan")

Also at the same place in the function.

Here is a live example.

来源：https://stackoverflow.com/questions/13553539/jquery-mobile-moving-all-sliders-toogether

标签

jquery-mobile