防止多个滑块

我只是设法建立一些JavaScript代码，以确保多个滑块不超过24防止多个滑块

问题的最大值是，当我尝试并在jquery mobile的多页面模板中使用它，它仅适用于第一页，并且无法检查通过多页面模板加载的第二页。

这里是我的jsfiddle给的情况

[的jsfiddle示例]（http://jsfiddle.net/WEewU/20/

第一页的作品，第2页没有一个更好的主意。

我想，以确保任何页面上的滑块的数量不超过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); 
         }); 
        });

来源

2013-02-22 user2100493

jQuery Mobile呼吁页面事件一件美好的事情。他们将在特定页面或多个页面上执行，并且他们仅与jQuery Mobile一起工作，因此将其计为特定事件。要了解更多关于此的内容，请看这ARTICLE，要更透明这是我的个人博客。或找到它HERE。

这是你的代码的工作示例：http://jsfiddle.net/Gajotres/e8xZ2/

让我们经历的变化：

在左上角的jQuery 1.8.3选择和更改为* *onDomReady **
jQuery代码初始化为：
```
$(document).on('pagebeforeshow', '#home, #home2', function(){ 
```
它将使河畔e此代码在编号为的主页和homn2的页面上执行。

滑块和输入框可通过$.mobile.activePage访问。基本上这是一个活动页面jQuery Mobile选择器。

$.mobile.activePage.find("#sliders1 .slider");

和

$.mobile.activePage.find('.value').not(this).each(function() {

你jQuery Mobile架构升级到1.2的稳定版本

来源

2013-02-22 19:51:33 Gajotres

谢谢！我没有意识到，jQuery手机有一个活动页面查找滑块和输入框。更有意义。 – user2100493 2013-02-22 19:55:45

防止多个滑块

回答

相关问题