如何使这些javascript函数普遍适用于任何所需的元素？

在下面的代码中，我想将这5个函数减少到3个

第一个函数

toggle_visibility（）

在我从html调用函数时通过传递id已经变得通用，但是，我必须重复接下来的两个函数

thankYouText_Change（）

和

resettxt（）

，因为我不知道如何存储

项

变量的值，也不要使用

p

或

OK_按钮

变量并将它们传递给下一个函数，以便其他函数可以使用它们

我的目标是找出如何将这些函数简化为一组3个函数，这些函数可以在我的html中随时访问，并且只需使用

onClick=“function\u foo（'desired\u element\u foo'）

，就可以应用于任何和所有相关的元素，而不必在每次我想在不同的元素上使用它们时都有一组单独的函数

我认为，为了做到这一点，我还需要知道如何使变量

p

和

OK_按钮

具有自动更改的值，并根据我发送给它们/访问它们的id进行存储

function toggle_visibility(id) {
    var Item = document.getElementById(id);

    if (Item.style.display == 'block') {
        Item.style.display = 'none';
    }
    else {
        Item.style.display = 'block';
    }
}
function thankYouText_Change() {
    var p = document.getElementById("thanksForEmail");
    var OK_Button = document.getElementById("okButton");

    if (p.innerHTML == 'Thank you for submitting your e-mail.') {
        OK_Button.style.display = 'none';
        p.innerHTML = "Returning to page...";
        setTimeout("toggle_visibility('msgSend'), resettxt()", 500);
    }
}
function resettxt() {
    var p = document.getElementById("thanksForEmail");
    var OK_Button = document.getElementById("okButton");

    if (p.innerHTML == 'Returning to page...') {
        p.innerHTML = 'Thank you for submitting your e-mail.';
        OK_Button.style.display = 'block';
    }
}
//Start of repeated functions for second div and button elements
function thankYouText_Change2() {
    var p = document.getElementById("thanksForEmail2");
    var OK_Button = document.getElementById("okButton2");

    if (p.innerHTML == 'Thank you for submitting your e-mail.') {
        OK_Button.style.display = 'none';
        p.innerHTML = "Returning to page...";
        setTimeout("toggle_visibility('msgSend2'), resettxt2()", 500);
    }
}
function resettxt2() {
    var p = document.getElementById("thanksForEmail2");
    var OK_Button = document.getElementById("okButton2");

    if (p.innerHTML == 'Returning to page...') {
        p.innerHTML = 'Thank you for submitting your e-mail.';
        OK_Button.style.display = 'block';
    }
}

---

对于第一个过程，您可以将其简化为以下内容：

function thankYouText_Change(pId, okId, msgSendId){
    var p = document.getElementById(pId);
    var OK_Button = document.getElementById(okId);

    if(p.innerHTML == 'Thank you for submitting your e-mail.'){
        OK_Button.style.display = 'none';
        p.innerHTML = "Returning to page...";
        setTimeout(function(){
          toggle_visibility(msgSendId);
            resettxt(pId, okId);
        }, 500);
    }
}

function resettxt(pId, okId){
    var p = document.getElementById(pId);
    var OK_Button = document.getElementById(okId);

    if(p.innerHTML == 'Returning to page...'){
    p.innerHTML = 'Thank you for submitting your e-mail.';
    OK_Button.style.display = 'block';}
}

然后，对于页面上的每一组元素，您只需调用

thankYouText\u Change

，为3个相关元素中的每一个提供正确的ID即可

第二步，您可以将我上面的两个函数简化为一个，这样您就不需要对相同的元素多次重新调用

document.getElementById

（不重要，但我也喜欢使用

var

变量和函数声明所有内容）：

---

（请注意，这样就不需要使用

resettxt

功能。）

非常感谢。我能再请你帮个忙吗……我很确定我理解这里发生的事情，但是你能解释一下为什么这样做是为了让我能够在大脑中储存解释，以便我能够向其他人解释它吗？另外，具体地说，你能解释一下为什么我必须使用setTimeout（function（）{调用其他函数}）与其用逗号分隔它们？@proude_to_be_Noob-具体来说，

setTimeout

中的调用应该用分号分隔，而不是逗号。使用函数调用只会使这更容易处理-尤其是在传递参数时，否则您需要开始担心是否要逃避参数lues等。剩下的只是组织代码和参数，这样就不需要多个函数。是的，第二步很有意义，它基本上只是将resettxt函数剪切并粘贴到setTimeout部分，而不是将其作为一个单独的函数。（我想）因此，在第一次传递时要明确…通过在setTimeout（）中使用函数（），我可以很容易/简单地将pId和okId参数传递给我决定也传递它们的任何函数？…然后当我编写该函数时（在本例中是resettxt（））只要我将这些定义为该函数中的参数，它就会工作，因为参数及其各自的值正在传递？

var thankYouText_Change = function(pId, okId, msgSendId){
    var p = document.getElementById(pId);
    var OK_Button = document.getElementById(okId);

    if(p.innerHTML == 'Thank you for submitting your e-mail.'){
        OK_Button.style.display = 'none';
        p.innerHTML = "Returning to page...";
        setTimeout(function(){
          toggle_visibility(msgSendId);
            if(p.innerHTML == 'Returning to page...'){
                p.innerHTML = 'Thank you for submitting your e-mail.';
                OK_Button.style.display = 'block';
            }
        }, 500);
    }
}