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 回答