我设法构建了一些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);
});
});
答案 0 :(得分：3)
jQuery Mobile 有一个很棒的事情叫做页面事件。它们将在特定页面或多个页面上执行，并且仅适用于 jQuery Mobile ，因此将其视为特定事件。要了解更多信息，请查看此 ARTICLE ，为了更加透明，这是我的个人博客。或者找到 HERE 。
这是您的代码的一个有效示例：http://jsfiddle.net/Gajotres/e8xZ2/
让我们进行更改：
*onDomReady ** jQuery代码初始化为：
$(document).on('pagebeforeshow', '#home, #home2', function(){
这将确保此代码在ID 主页和 homn2 的网页上执行。
可以通过 $.mobile.activePage 访问滑块和输入框。基本上这是一个有效页面 jQuery Mobile 选择器。
$.mobile.activePage.find("#sliders1 .slider");
和
$.mobile.activePage.find('.value').not(this).each(function() {
您的 jQuery Mobile 框架已升级至稳定版本1.2