Как я могу сделать эти функции JavaScript универсально применимыми к любому желаемому элементу? - PullRequest
Новая
       20

Как я могу сделать эти функции JavaScript универсально применимыми к любому желаемому элементу?

0 голосов
/ 28 января 2012

В следующем коде я хочу уменьшить эти 5 функций до 3.

Первая функция toggle_visibility() уже сделана универсальной, передавая идентификатор при вызове функции из моего html, однако я должен повторить следующие две функции thankYouText_Change() и resettxt(), потому что я не знаю, как сохранить значение переменной Item, а также переменных p или OK_button и передать их следующей функции, чтобы их могли использовать другие функции.

Моя цель - выяснить, как свести их к набору из 3 функций, к которым можно обратиться в любое время в моем html и применить к любому и всем соответствующим элементам, просто используя onClick="function_foo('desired_element_foo'), без необходимости иметь отдельный набор функций для каждого раза, когда я хочу использовать их на другом элементе.

Я думаю, что для того, чтобы сделать это, мне также нужно знать, как сделать так, чтобы переменные p и OK_Button имели значения, которые будут автоматически изменяться и сохраняться на основе идентификатора, который я им отправляю / обращаюсь к ним с помощью . 

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

1 Ответ

0 голосов
/ 28 января 2012

Для первого прохода вы могли бы упростить это до следующего вида: 

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_Change с правильными идентификаторами для каждого из 3 связанных элементов.

Для второго прохода вы можете упростить обе мои функции выше в одну, так что вам не нужно повторно вызывать 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.)

...