我只是设法构建了一些 javascript 代码以确保多个滑块不超过最大值 24。
问题是，当我尝试在 jquery mobile 的多页模板中使用它时，它仅适用于第一页并且无法检查通过多页模板加载的第二页。
这是我的jsFiddle，可以更好地了解情况
[JsFiddle 示例]( http://jsfiddle.net/WEewU/20/
第一页有效，第二页无效。
我试图确保页面上任何数量的滑块不超过 24 小时。然后在 jquery mobile 中的所有多页模板中使用此代码。
完整代码
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<form>
<!-- Home Page-->
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-id="myheader">
<h1>test</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul id="sliders1">
<li>
<input type="range" id="slider" class="value" name="slider1" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider2" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider3" value="0"
min="0" max="24" data-highlight="true" />
</li>
</ul> <a href="#home2">Link to 2nd page</a>
</div>
</div>
<div data-role="page" id="home2">
<div data-role="header" data-position="fixed" data-id="myheader">
<h1>test</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul id="sliders">
<li>
<input type="range" id="slider" class="value" name="slider4" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider5" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider6" value="0"
min="0" max="24" data-highlight="true" />
</li>
</ul> <a href="#home">Link to Home</a>
</div>
</div>
</form>
</body>
Javascript
var sliders = $("#sliders1 .slider");
sliders.each(function() {
var max = 24;
var value = Number($(this).text(), 10),
availableTotal = max;
});
$(".value").change(function() {
var thisAmount = Number($(this).prop("value"));
var totalMax = 24;
var indMin = Number($(this).attr("min"));
var indMax = Number($(this).attr("max"));
var total = 0;
//Get the values of all other text boxes
$('.value').not(this).each(function() {
total += Number($(this).prop("value"));
});
//Find the remaining from our total sliders max
var remaining = totalMax - total;
if (remaining < 0) {
remaining = 0;
}
//if we are under our minimums, go for it! Otherwise, reduce the number.
if (thisAmount >= indMin && thisAmount < indMax && thisAmount < totalMax && thisAmount < remaining) {
$(this).siblings(".slider").slider("option", "value", thisAmount);
//total += thisAmount;
} else {
//var setMax = ((indMax + totalMax) - Math.abs(indMax - totalMax)) / 2;
var setMax = Math.min(indMax, totalMax, remaining);
$(this).siblings(".slider").slider("option", "value", setMax);
$(this).prop("value", setMax);
//total += (thisAmount - setMax);
}
//above was getting buggy, so lets just reset total and get it again
total = 0;
//Get the values of all text boxes
$('.value').each(function() {
total += Number($(this).prop("value"));
});
//Find our new remaining number after updating total for this value
remaining = totalMax - total;
if (remaining < 0) {
remaining = 0;
}
//Set each slider to the current point and update their max values.
$('.value').each(function() {
var sliderVal = Number($(this).prop("value"));
var sliderMin = Number($(this).attr("min"));
var sliderMax = Number($(this).attr("max"));
var setNewMax = (((sliderMax + totalMax) - Math.abs(sliderMax - totalMax)) / 2);
var newMax = sliderVal + remaining;
if (newMax < setNewMax) {
$(this).siblings('.slider').slider("option", "max", newMax);
} else {
$(this).siblings('.slider').slider("option", "max", setNewMax);
}
$(this).prop("max", setNewMax);
});
});