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

Question

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

第一个函数 toggle_visibility() 已经通过在我从 html 调用该函数时传递 id 来实现通用，但是，我必须重复接下来的两个函数 thankYouText_Change() 和 resettxt() 因为我不知道如何存储 Item 变量的值，也不知道这p 或 OK_button 变量并将它们传递给下一个函数，以便其他函数可以使用它们。

我的目标是弄清楚如何将这些函数减少为一组 3 个函数，这些函数可以随时在我的 html 中访问，并只需使用 onClick="function_foo('desired_element_foo')，而不必每次我想在不同的元素上使用它们时都拥有一组单独的函数，

我认为为了做到这一点，我还需要知道如何创建变量 p 和OK_Button 的值会根据我发送给它们/访问它们的 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';
    }
}

Answer 1

对于第一遍，您可以将其简化为如下所示：

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';}
}

然后对于页面上的每组元素，您只需使用 3 个相关元素中每一个的正确 ID 调用 thankYouText_Change 即可。

对于第二遍，您可以将我的上述两个函数简化为一个，这样您就不需要在相同的元素上多次重新调用 document.getElementById （并不重要，但我也喜欢用 var 声明所有内容 - 变量和函数都一样）：（

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);
    }
}

请注意，这消除了对 resettxt 函数的需要。）