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个相关元素中的每一个调用thankYouText_Change和正确的ID。

对于第二遍，您可以将上述两个函数简化为一个，这样您就不需要多次重新调用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功能的需要。）

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

1 个答案: