Question

我目前正在使用pageslider.js来制作原型应用程序。我正在学习，请耐心等待。我有几页内容并使用原始html动态创建填充，其中一个页面有一个用户选择选项。我可以将记录的值记录到本地存储中（根据控制台窗口）但我想执行计算并显示下一页记录的值。这在我创建的小提琴中效果很好，我理解这是因为.html包含在单个页面中，因此inner.html方法有效，但我不知道如何在这种模型中实现相同的功能。尝试过方法目录后，如果有人可以帮助或者指出我如何为此目的检索值，我将不胜感激。以下是我的app.js文件的内容。任何帮助.....即使是不可避免的菜鸟也是最受欢迎的。

> 
window.addEventListener('load', function () {
new FastClick(document.body);
}, false);

// The dynamically built HTML pages.
var homePage =
'<div>' +
Page1content
'</div>';

var detailsPage =
'<div>' +
'<body>' +
    '<div id = "wrapper">' +
    '<div id = "scroller">' +
    '<div id = "wrapperheader">' +
    '<div id = "contentheader"><a href="#" class="btnleft"><img       src="images/home.png"></a><a href="#page3" class="btnright"><img src="images/pi.png"></a><a href="#" class="contentheader"><img src="images/headerlogo.png"></a></div>' +
            '<div id = "content">' +
            '<div id = "doseinput"><h1>Body Weight<select id="weightselect"><option value="10">10</option><option value="12">12</option>.... value="140">140</option></select></div>' +
            '<div id = "doseinput2"><h1>Dosage<select id="doseselect"><option value="0.1">0.1g/Kg</option><option value="0.15">0.15g/Kg</option><option value="0.2">0.2g/Kg</option></select></div>' +
            '<div id = "doseinput3"><a href="#page4"><input type="button" value="Calculate" onclick="computeDose()"></div>' +
            '<div id = "footer">' +
            '<p class = "footertextleft"></p>' +
            '<p class = "footertextright">2015</p>' +
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
    '</div>' +
'</div>';

////output page///

var detailsPage3 =
'<div>' +
'<body>' +
    '<div id = "wrapper">' +
            '<div id = "scroller">' +
            '<div id = "wrapperheader">' +
            '<div id = "contentheader"><a href="#" class="btnleft"><img src="images/home.png"></a><a href="#page3" class="btnright"><img src="images/pi.png"></a><a href="#" class="contentheader"><img src="images/headerlogo.png"></a></div>' +
            '<div id = "content">' +
            '<div id = "weightoutput"><h1>Weight<span id="weight">"weight"</span></h1></div>'+ 
            '<div id = "doseoutput"><h1>Dosage <span id="dose">"dose"</span></h1></div>'+ 
            '<div id = "output1"><h1>Daily: <span id="output1">?</span></h1></div>'+ 
            '<div id = "output2"><h1>5 times a week: <span id="output2">?</span></h1></div>'+ 
            '<div id = "output3"><h1>3 times a week: <span id="output3">?</span></h1></div>'+ 
            '<div id = "output4"><h1>Twice a week: <span id="output4">?</span></h1></div>'+ 
            '<div id = "output5"><h1>Once a week: <span id="output5">?</span></h1></div>'+ 
            '<div id = "output6"><h1>Once every 2 weeks week: <span id="output6">?</span></h1></div>'+ 
            '<div id = "footer">' +
            '<p class = "footertextleft">UK/HZN/15-0001</p>' +
            '<p class = "footertextright">Date of preperation: January 2015</p>' +
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
            '</div>'+
    '</div>' +
'</div>';

 //Obtain user inputsvar slider = new PageSlider($("#container"));
 $(window).on('hashchange', route);

 // Basic page routing
 function route(event) {
var page,
    hash = window.location.hash;

if (hash === "#page1") {
    page = merge(detailsPage, {});
//        slider.slide($(page), "right");
} else if (hash === "#page2") {
    page = merge(detailsPage1, {});
//        slider.slide($(page), "right");
} else if (hash === "#page3") {
    page = merge(detailsPage2, {});
//        slider.slide($(page), "right");
}else if (hash === "#page4") {
    page = merge(detailsPage3, {});
//        slider.slide($(page), "right");
}

 else {
    page = homePage;
 //        slider.slide($(homePage), "left");
 }

 slider.slidePage($(page));

 }

 function computeDose() {
 var dose = Number(document.getElementById("doseselect").value);
 localStorage.setItem("dose",dose);
 //  var weight = parseInt(localStorage.getItem("dose"));

 var weight = Number(document.getElementById("weightselect").value);
 localStorage.setItem("weight",weight);
 // var weight = parseInt(localStorage.getItem("weight"));


 //Display result of calculatio

 ////dose     
 document.getElementById("output1").innerHTML = Math.round(weight * dose) / 7;
 document.getElementById("output2").innerHTML = Math.round(weight * dose) / 5;
 document.getElementById("output3").innerHTML = Math.round(weight * dose) / 3;
 document.getElementById("output4").innerHTML = Math.round(weight * dose) / 2;
 document.getElementById("output5").innerHTML = Math.round(weight * dose);
 document.getElementById("output6").innerHTML = Math.round(weight * dose) * 2;

 }

//Primitive template processing. 


function merge(tpl, data) {
return tpl.replace()
          .replace()
          .replace();
 }




 route();

Pageslider.js localStorage.getItem新页面加载

0 个答案: