javascript - 使用 JQuery Mobile 进行多页面设计的问题
问题描述
我有一个使用 JQuery Mobile 中的多页架构的简单 Web 应用程序。
我现在有两个页面在同一个 html 中,稍后将添加第三个页面。
主页包含 5 个链接的列表,当用户单击任何一个链接时,它们都会将它们转换到第二页。
这 5 个链接实际上链接到同一个第二页,但唯一的区别是第二页的标题更改以反映用户在主页中按下的链接。
在第二页上,我在页脚中有两个按钮,分别称为 Next 和 previous。单击下一步时,页面应刷新,并且标题应反映主页中的下一个链接。例如,如果用户在 Foghorn 上并单击下一步,则下一页将是“小”,依此类推。
我有从 0 开始的所有 5 个链接的 ID,用于雾号等等。我跟踪用户所在的第二页链接的 ID,作为 JS 中名为“chickenNumber”的全局变量。
我需要通过增加/减少我已经完成的这个全局变量来实现下一个和上一个按钮,但它似乎没有用列表中的下一个链接替换标题。
知道我做错了什么吗?
下面是我的第二页的表单代码:
<div data-role="page" id="entry_page">
<div id="chickenNameContainer" data-role="header">
<a href="#" onclick="clearFields()" data-icon="refresh">Clear</a>
<h3 id="chickenNameHeader"></h3>
<a href="#" data-icon="action" >Show Logs</a>
</div>
<div class="form-container">
<form action="#" method="post">
<label for="ID_input">ID:</label>
<input id="ID_input" type="number" placeholder="xxxx">
<label for="weight_input">Weight (g):</label>
<input id="weight_input" type="number" step="any" min="0" max="10000" placeholder="0. → 10000">
<label for="eggs_input">Eggs laid:</label>
<input id="eggs_input" type="number" min="0" max="4" placeholder="0 → 4">
<label for="grain_input">Grain eaten (g):</label>
<input id="grain_input" type="number" step="any" min="0" max="1000" placeholder="0. → 1000">
<label for="category_input">Category:</label>
<select id="category_input" required="true">
<option value="empty" selected></option>
<option value="poor">Poor</option>
<option value="average">Average</option>
<option value="good">Good</option>
</select>
<button id="submitBtn" type="submit" name="button">Save log entry</button>
</form>
</div>
<div data-role="footer" class="ui-bar">
<a id="6" href="#" onclick="traverse(this)" data-icon="arrow-r" data-ajax="false" >Next</a>
<a id="7" href="#" onclick="traverse(this)" data-icon="arrow-l" data-ajax="false" >Previous</a>
<a id="5" onclick="getID(this)" href="#" data-icon="home" >Home</a>
</div>
</div>
这是我的 JS 代码:
var chickenNumber;
var watchGeo;
var latitude;
var longitude;
var today;
var time;
var dateTime;
var chickenNames = ["Foghorn", "Little", "Tweety", "Hawk", "Bertha"];
var foghorn_items = [];
var little_items = [];
var tweety_items = [];
var hawk_items = [];
var bertha_items= [];
function getID(theValue)
{
chickenNumber = theValue.id;
if (chickenNumber < 5)
{
$.mobile.changePage ("ChickenLogs.html#entry_page", { transition: "slide"});
}
else {
$.mobile.changePage ("ChickenLogs.html#home_page", { transition: "slide", reverse: true});
}
}
//Increment or decrement the chickenNumber page id if user clicks next or previous
function traverse(event)
{
if(event.id == "6")
{
if(chickenNumber == 4)
{
chickenNumber = 0;
clearFields();
}
else
{
chickenNumber++;
clearFields();
}
}
else
{
if(chickenNumber == 0)
{
chickenNumber = 4;
clearFields();
}
else
{
chickenNumber--;
clearFields();
}
}
}
//Retrieve stored values from the phone for all the chicken breeds on app launch
$(document).ready(function()
{
foghorn_items = JSON.parse( localStorage.foghorn_items || '[]');
little_items = JSON.parse( localStorage.little_items || '[]');
tweety_items = JSON.parse( localStorage.tweety_items || '[]');
hawk_items = JSON.parse( localStorage.hawk_items || '[]');
bertha_items = JSON.parse( localStorage.bertha_items || '[]');
});
//Initialise entry page for the first time and handle form submission validation
$(document).delegate("#entry_page","pageinit",function()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
$("#chickenNameHeader").text(chickenNames[chickenNumber]);
$("#submitBtn").click(function(event)
{
var id = $.trim($("#ID_input").val());
var weight = $.trim($("#weight_input").val());
var eggs = $.trim($("#eggs_input").val());
var grain = $.trim($("#grain_input").val());
var category = $("#category_input").val();
var error_free = 1;
if(id == "")
{
alert("Please enter a 4 digit ID");
error_free = 0;
}
if(weight == "")
{
alert("Please enter the amount of weight");
error_free = 0;
}
if(eggs == "")
{
alert("Please enter the amount of eggs laid");
error_free = 0;
}
if(grain == "")
{
alert("Please enter the amount of grain eaten");
error_free = 0;
}
if(category == "empty")
{
alert("Please select a category");
error_free = 0;
}
if(Number(id) < 1000 || Number(id) > 9999)
{
alert("ID must be 4 digits");
error_free = 0;
}
if(Number(weight) < 0 || Number(weight) > 10000)
{
alert("Weight must be between 0. and 10000");
error_free = 0;
}
if(Number(grain) < 0 || Number(grain) > 1000)
{
alert("Grains eaten must be between 0. and 1000");
error_free = 0;
}
if(latitude == "" || longitude == "")
{
alert("Location not given. Please allow location access and refresh the application");
error_free = 0;
}
if(dateTime == "")
{
alert("Date & Time not acquired");
error_free = 0;
}
if(!Boolean(error_free))
{
alert("Error saving log");
event.preventDefault();
}
else
{
var item = {
id:id,
dateTime:datTime,
latitude:latitude,
longitude:longitude,
weight:weight,
eggs:eggs,
grain:grain,
category:category };
switch (chickenNumber) {
case 0:
foghorn_items.push(item);
localStorage.foghorn_items = JSON.stringify(foghorn_items);
break;
case 1:
little_items.push(item);
localStorage.little_items = JSON.stringify(little_items);
break;
case 2:
tweety_items.push(item);
localStorage.tweety_items = JSON.stringify(tweety_items);
break;
case 3:
hawk_items.push(item);
localStorage.hawk_items = JSON.stringify(hawk_items);
break;
case 4:
bertha_items.push(item);
localStorage.bertha_items = JSON.stringify(bertha_items);
break;
}
}
});
});
//Get location and time values
function onSuccess(position)
{
latitude = position.coords.latitude;
longitude = position.coords.longitude;
alert(latitude);
today = new Date();
date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
dateTime = date+' '+time;
alert(dateTime);
}
//Throw error if location access is not possible
function onError(error) {
var txt;
switch(error.code)
{
case error.PERMISSION_DENIED:
txt = 'Location permission denied';
break;
case error.POSITION_UNAVAILABLE:
txt = 'Location position unavailable';
break;
case error.TIMEOUT:
txt = 'Location position lookup timed out';
break;
default:
txt = 'Unknown position.'
}
alert(txt)
}
//Handle entry page when it is showed again after the first time
$(document).on("pageshow", "#entry_page", function()
{
$("#chickenNameHeader").text(chickenNames[chickenNumber]);
clearFields();
});
//Clear inputs fields on the entry page
function clearFields()
{
$("#ID_input").val("");
$("#weight_input").val("");
$("#eggs_input").val("");
$("#grain_input").val("");
$("#category_input").val('empty').change();
}
我知道我不应该添加很多代码,但我认为如果我不放我所有的 JS 代码是无法理解的。
有没有办法在“traverse()”方法执行完成后调用“pageshow”?还是我应该做一些完全不同的事情?
在更新 chickenNumber 之后,我什至尝试在 traverse() 中使用 $.mobile.changePage() ,但这也不起作用。
解决方案
我有一个管灯时刻并想通了。
我所要做的就是使用 $("#chickenNameHeader").text(chickenNames[chickenNumber]); 在更改 chickennumber 变量之后。
推荐阅读
- javascript - 如果 keepfocus 设置为 false,react-day-picker 不会关闭
- javascript - 复选框 True/False - 添加到计算
- swift - MacOS 在 StatusBar 上创建 ProgressBar
- vba - 如何将工作表设置为变量以获取更多方法(带循环)
- reactjs - Axios 获取带有标头的请求不起作用
- amazon-web-services - 无法在 AWS Quick Sight 中解析来自 S3 的 JSON 文件
- java - 文本字段中的返回值
- rmi - 如何在不出现 UnmarshallException 的情况下关闭 RMI-Server?
- python - 如何发送公式而不是结果?
- typescript - 如何使用“nswag”覆盖自动生成的方法?