0

簡単な靴のサイズ変換をしようとしています。それに応じてすべてのスライダーの値を更新し、それらの値を取得する方法を知っていますが、変更イベントでスライダーをすべて一緒に更新できるようにしたいと思います。

どうすればいいですか？

<!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>
4

1 に答える 1

0

これでうまくいくはずです。テストしてください。これがあなたがずっと望んでいたことだと教えてください。

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

必要な数のスライダーを追加できます。ここで要素を追加/削除するだけです。

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

関数内の同じ場所にもあります。

これが実際の例です。

于 2012-11-25T18:43:44.927 に答える