Jquery mobile jquery mobile将所有滑块移动到一起_Jquery Mobile

Jquery mobile jquery mobile将所有滑块移动到一起

jquery-mobile

Jquery mobile jquery mobile将所有滑块移动到一起,jquery-mobile,Jquery Mobile,我正在尝试做一个简单的鞋子尺寸转换器。我已经相应地更新了所有滑块的值，我知道如何获取它们的值，但我希望能够在更改事件时一起更新所有滑块我怎么做 <!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.

我正在尝试做一个简单的鞋子尺寸转换器。我已经相应地更新了所有滑块的值，我知道如何获取它们的值，但我希望能够在更改事件时一起更新所有滑块

我怎么做

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


jQM演示1
男式尺码
欧洲：
美国：
英国：
日本：
var self=这个；
this.sliderTouchUp=函数（）{
var currentVal=$（“#欧洲”）.val（）；
console.log（“val更改为”+currentVal）；
};
$（'.ui slider'）.live（'mouseup'，self.sliderTouchUp）；
$（'.ui slider'）.live（'touchend'，self.sliderTouchUp）；

这应该可以，请测试一下，告诉我这是您一直想要的：

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

也在函数中的同一位置

这是一个活生生的例子。

@Gajotres请不要乞求/鼓励人们接受或投票支持你的答案。@AndrewBarber停止骚扰那些要求最正常的事情的人，这个选项的RemidSign peopole绝对没有错。让PO表达自己如果他生气了，停止为他们说话。读这里说实话我不在乎了，几点或多或少对我来说都是无关紧要的。