jQuery的移动一起移动所有滑块 [英] jquery mobile moving all sliders toogether
本文介绍了jQuery的移动一起移动所有滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试做一个简单的鞋子尺码转换器. 我已经相应地更新了所有滑块的值，并且我知道如何获取它们的值，但是我希望能够在更改事件中一起更新所有滑块.
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.
我该怎么办?
<!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>
推荐答案
这应该做到，请对其进行测试，并告诉我这就是你一直想要的东西:
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.
此处是一个实时示例.
这篇关于jQuery的移动一起移动所有滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
