javascript - 使用 JQuery Mobile 进行多页面设计的问题

Question

我有一个使用 JQuery Mobile 中的多页面架构的简单 Web 应用程序。

我现在有两个页面在同一个 html 中，稍后会添加第三个。

home page包含 5 个链接的列表，当用户单击任何一个链接时，这些链接将转换到第二页。

这 5 个链接实际上链接到同一个第二页，但唯一的区别是第二页的标题更改以反射(reflect)用户在主页中按下的链接。

关于second page ，我在页脚中有两个按钮，分别称为“下一个”和“上一个”。单击下一步时，页面应刷新，标题应反射(reflect)主页中的下一个链接。例如，如果用户在 Foghorn 上并单击下一步，那么下一页将是“小”等等。

我有所有 5 个链接的 ID，从 0 开始为 foghorn 等等。我跟踪用户所在的第二页链接的 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. &rarr; 10000">

                <label for="eggs_input">Eggs laid:</label>
                <input id="eggs_input" type="number" min="0" max="4" placeholder="0 &rarr; 4">

                <label for="grain_input">Grain eaten (g):</label>
                <input id="grain_input" type="number" step="any" min="0" max="1000" placeholder="0. &rarr; 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() ，但这也没有用。

Answer 1

我灵机一动，想通了。

我所要做的就是使用 $("#chickenNameHeader").text(chickenNames[chickenNumber]);在更改 chickennumber 变量之后。