<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>collapsible demo</title>
<link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header">
<h3 style="color:#3CF">Astrophoto Tool</h3>
</header>
<div role="main" class="ui-content">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#rul" class="ui-btn-active">Rule 600</a></li>
<li><a href="#at">Advanced Tool</a></li>
<li><a href="#hlp">Help</a></li>
<li><a href="#abt">About</a></li>
</ul>
</div>
<div id="rul" >
<div data-role="content" data-theme="b">
<div data-role="content">
<div align="center" style="color:#0F0">No Star Trails Exposure</div>
<p align="center" style=" color:#FFFF00">Rule 600 </p>
</div>
<script>
$(document).ready(function() {
$("#lens").on("keyup", function () {
var lens = $(this).val();
//var fullframe = 0; // initialize the sum to zero
var fullframe = 600 / lens;
$('#fullframe').val(fullframe.toFixed(2));
var apsccanon = 600 / (lens * 1.6);
$('#apsccanon').val(apsccanon.toFixed(2));
var apscnikon = 600 / (lens * 1.5);
$('#apscnikon').val(apscnikon.toFixed(2));
var apscolympus = 600 / (lens * 2.0);
$('#apscolympus').val(apscolympus.toFixed(2));
});
});
</script>
<div data-role="content" data-theme="b">
<form action="">Lens: Focal Length (mm)
<br>
<input type='text' id='lens' style="color:#FF6"/>
<br>Full Frame: (Time in Seconds)
<br>
<input type='text' id='fullframe' value="" style="color:#0F0" readonly>
<br>APS-C (Canon): (Time in Seconds)
<br>
<input type='text' id='apsccanon' value="" style="color:#0F0" readonly />
<br>APS - C (Nikon/Sony/Pentax): (Time in Seconds)
<br>
<input type='text' id='apscnikon' value="" style="color:#0F0" readonly />
<br>APS - C (Olympus/Panasonic): (Time in Seconds)
<input type='text' id='apscolympus' value="" style="color:#0F0" readonly />
<input name="Reset" type="reset" value="Reset">
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#pix,#lens,#dec").on("keyup", function () {
var pix = $(this).val();
var lens = $(this).val();
var dec = $(this).val();
var res = (14*pix*2)/lens*cos((dec/180)*22/7);
$('#res').val(res.toFixed(2));
});
});
</script>
<div id="at" >
<div data-role="content" data-theme="b">
<form action="">Sensor Pixel Size (examp 4.3)
<br>
<input type='text' id='pix' style="color:#FF6"/>
<br>
Lens: Focal Length (mm)
<br>
<input type='text' id='lens' style="color:#FF6"/>
<br>
Star Declination (degrees)
<input type='text' id='dec' style="color:#FF6"/>
<br> Result (secs)
<input type="text" id="res" value="" style="color:#0F0" readonly />
<input name="Reset" type="reset" value="Reset">
</form>
</div>
</div>
<div id="hlp" >
<div data-role="content" data-theme="b">
Help
</div>
</div>
<div id="abt" >
<div data-role="content" data-theme="b">
<p>This application is for astrophotographers. There are
two tools.<br> 1. Rule 600 (which is quite accurate) and <br>2. Advancded tool
which requires a few more inputs and the result gives better accuracy.</p>
</div>
</div>
</div>
</div>
<footer data-role="footer">
<h3>Footer</h3>
</footer>
</section>
</body>
</html>
/////////////////////////////////////////////// ////////////////////////////////
结果文本框保持空白。我是否将jquery脚本放在错误的位置
/////////////////////////////////////////// ///////////////////
答案 0 :(得分：1)
您有2个输入id =“lens”。使它们在标签中独一无二。
而不是使用$（document）.ready（function（）{...在关闭BODY标记之前将所有脚本放在页面底部，而不是使用jQM pagecreate事件。
在keyup处理程序中使用$（this）3次只会给你3次相同的值（无论你输入的是哪一个）。
除了使用Math.cos（）之外，您还可以使用Math.PI代替（22/7）。
$(document).on("pagecreate", "#page1", function () {
$("#lens").on("keyup", function () {
var lens = $(this).val();
//var fullframe = 0; // initialize the sum to zero
var fullframe = 600 / lens;
$('#fullframe').val(fullframe.toFixed(2));
var apsccanon = 600 / (lens * 1.6);
$('#apsccanon').val(apsccanon.toFixed(2));
var apscnikon = 600 / (lens * 1.5);
$('#apscnikon').val(apscnikon.toFixed(2));
var apscolympus = 600 / (lens * 2.0);
$('#apscolympus').val(apscolympus.toFixed(2));
});
$("#pix,#lens2,#dec").on("keyup", function () {
var pix = $("#pix").val();
var lens = $("#lens2").val();
var dec = $("#dec").val();
var res = (14 * pix * 2) / lens * Math.cos(dec * Math.PI / 180);
$('#res').val(res.toFixed(2));
});
});
<强> DEMO
答案 1 :(得分：0)
您不能拥有2个具有相同ID的元素，您有两个ID为"lens"的元素。此外，您需要将cos()替换为Math.cos()。最后，您需要根据每个输入分离您的键盘功能。并使用parseInt()强制int。试试这个：
$("#pix,#lens_test,#dec").on("keyup", function () {
var pix = parseInt($("#pix").val());
var lens = parseInt($("#lens_test").val());
var dec = parseInt($("#dec").val());
var res = (14 * pix * 2) / lens * Math.cos((dec / 180) * 22 / 7);
$('#res').val(res.toFixed(2));
});