jQuery Mobile的滑块计算

我正在基于jQuery移动的订单形式，到现在为止我一直在使用http://demos.jquerymobile.com/1.4.2/forms/指导（我不是很好的JS，但我学习）。到目前为止，我有一个滑块，一个选择（是/否）和结果计算的文本框。剩下的就是取出滑块值并将其乘以yes或no值并将其显示在文本框中。例如，如果设置为yes，则乘以8;如果设置为no，则乘以10。jQuery Mobile的滑块计算

我已经看到了一些如何通过将DIV转换为基本滑块来实现此目的的示例，但我还没有想出使用jQuery移动滑块来实现这一点的方法。我仍然试图弄清楚，但我会欣赏任何想法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" /> 
    <link rel="stylesheet" href="css/jqm-docs.css"/> 
    <script src="js/jquery-1.7.1.min.js"></script> 
    <script src="js/jqm-docs.js"></script> 
    <script src="js/jquery.mobile-1.2.0.js"></script> 
    <style type="text/css"> 
     body{background:none transparent} 
    </style> 
</head> 
<body> 
<form action="redirector.php" method="POST" data-ajax="false" class="ui-body ui-body-a ui-corner-all"> 
    <div data-role="fieldcontain"><input type="range" name="slots" id="slots" value="16" min="8" max="18" data-theme="a" data-track-theme="b" /></div> 
    <style type="text/css" media="screen"> 
     .containing-element .ui-slider-switch { width: 9em; } 
    </style> 
    <div class="containing-element" style=""> 
     <select name="type" id="flip-min" data-role="slider"> 
      <option value="yes">yes</option> 
      <option value="no">no</option> 
     </select> 
     <div style="display: inline-block; vertical-align: top;"> 
      <label for="amount" style="margin:6px 6px 0 0">Amount:</label> 
      <input style="display: inline-block; margin-top: 2px" name="amount" id="amount" value="" type="text"> 
     </div> 

    </div> 
    <input type="submit" value="Submit" name="Submit_button"><input type="reset" value="Reset" name="Reset_button"> 
</form> 
</body> 
</html>

http://jsfiddle.net/Y6cqC/

来源

2014-03-04 Bestrafung

检查这一项http://jsfiddle.net/aravinth/Y6cqC/1/ – Aravin

这是一个不错的开始，但我希望它到滑块行动更新以及切换。 – Bestrafung

现在检查这一个http://jsfiddle.net/Y6cqC/2/ – Aravin

请尝试滑动计算

$("#flip-min").on("change", function() { 
    setAmount(); 

}); 
$("#slots").on("change", function() { 

     setAmount(); 

}); 
function setAmount(){ 
    if ($("#flip-min").val() == "yes") { 
      var a = $("#slots").val(); 
      $("#amount").val((a*10)); 
     } 
     if ($("#flip-min").val() == "no") { 
      var a = $("#slots").val(); 
      $("#amount").val((a*8)); 
     } 
}

小提琴demo here这一个。

来源

2014-03-04 16:57:50 Aravin

这很好，但实际上有一个小缺陷，这似乎很常见。数学是错误的，并“下降”。例如，我得到了50.0199999，而不是50.02。你对如何解决这个问题有任何想法吗？实际上我在这里查看了其他几个问题，他们的解决方案都没有正常工作。这是我最近一次尝试使用某些数字而非其他数字的例子，例如0.78： $（“＃amount”）.val（（a * 78/100.0））; – Bestrafung

创建一个小提琴并发送我们会看。@ Bestrafung – Aravin

jQuery Mobile的滑块计算

回答

相关问题