替代具有许多类似功能

Alternative to having numerous similar functions

本文关键字:功能 许多类      更新时间:2023-09-26

我的网站是一个多页页面。根据用户在 page 1 上单击的链接,第 2 页上的表单必须接受用户输入并将其存储在不同的数组中。我必须根据用户在页面上单击的链接使用略有不同的功能。该函数的代码如下所示。(提前为新手编码道歉,只是通过反复试验学习)。

function hp1Form() {
    var c = document.getElementById("conductivity").value;
    var p = document.getElementById("ph").value;
    var m = document.getElementById("moisture").value;
    var d = document.getElementById("doxy").value;
    if (isNaN(c) || c < 0 || c > 10000) {
            alert("Conductivity is a value between 0 and 10000");                   
        } else if (isNaN(p) || p < 1 || p > 14) {
            alert("pH is a value between 1 and 14");    
        } else if (isNaN(m) || m < 0 || m > 100) {
            alert("Moisture is a percentage between 0 and 100");
        } else if (isNaN(d) || d < 0 || d > 100) {
            alert("Dissolved oxygen is a value between 0 and 100");     
        }
        else {
    var formattedData = "Date: "+timestamp+" Conductivity (uS): "+c+" pH: "+p+
    " Moisture (%): "+m+" Dissolved oxygen (ppm): "+d;
    var hp1Data = [formattedData];
    var existinghp1Data = JSON.parse(localStorage.getItem("hp1Data"));
    if (existinghp1Data == null) {
        existinghp1Data = [];
    }
    localStorage.setItem("hp1Data", JSON.stringify(hp1Data));
    existinghp1Data.push(hp1Data);
    localStorage.setItem("hp1Data", JSON.stringify(existinghp1Data));
    clearForm();            
        }       
}
function showLog1() {
    $.mobile.changePage ("#log");
    $(document).on("pageshow","#log",function(){
        $("#logPageHeader").text("HP 1");
        var boo = JSON.parse(localStorage["hp1Data"]);
        $("#allLogs").text(boo);
    });
}

以上是我想在用户点击link1时执行的功能。如果他们点击link2,其他一切都保持不变,除了我希望所有提及都更改"hp1Data","现有hp1Data"更改。我目前有 5 个函数 hp1Form()、hp2Form() 等。

我可以将代码简化为仅使用一个hpForm()函数和一个showLog()函数,并且仍然可以根据需要进行更改吗?

附言我知道几乎肯定有一种更简单的方法可以做我想做的事情(在我的网站上),但我现在只是想以这种方式做到这一点。

使用参数调用function hpForm(formNumber),使其是动态的。然后在函数中,您可以拥有 localStorage.setItem(formNumber, JSON.stringify(formNumber)); .然后,您可以调用hpForm('hp1Data'),hpForm('hp2Data')等。