Wie für eine Schleife für verschiedene Arrays

Question

Ich habe verschiedene Popups, die standardmäßig ausgeblendet sind und durch einen Klick und Javascript Magie angezeigt werden. Also, dies führt zu meinem Anfänger Javascript Gehirn in mehreren Zeilen von JS-Code, die ganz gleich aussehen.

Für all diese Pop-up-Box ich den folgenden Code bin mit:

var paperComButton = document.getElementsByClassName('paperCompanieButton'); 

for (var i = 0; i < paperComButton.length; i++) { 
    paperComButton[i].addEventListener('click', function() { 
    var greyOut = document.getElementById('greyOut'); 
    var popupWrapper = document.getElementById('popupWrapperFlex'); 
    var popup = document.getElementById('paperCompanieInfo'); 

    greyOut.style.zIndex = '5'; 
    popupWrapper.style.zIndex = '6'; 
    popup.style.zIndex = '1'; 
    greyOut.style.opacity = '1'; 
    popupWrapper.style.opacity = '1'; 
    popup.style.opacity = '1'; 
    }); 
} 

Die nächsten suche meist das gleiche

var pdfPreviewButton = document.getElementsByClassName('pdfPreviewButton'); 

for (var i = 0; i < pdfPreviewButton.length; i++) { 
    pdfPreviewButton[i].addEventListener('click', function() { 
    var greyOut = document.getElementById('greyOut'); 
    var popupWrapper = document.getElementById('popupWrapperFlex'); 
    var popup = document.getElementById('paperJobPdf'); 

    greyOut.style.zIndex = '5'; 
    popupWrapper.style.zIndex = '6'; 
    popup.style.zIndex = '1'; 
    greyOut.style.opacity = '1'; 
    popupWrapper.style.opacity = '1'; 
    popup.style.opacity = '1'; 
    }); 
} 

Das Problem ist, dass ich diese beide nicht nur haben Popups, so dass der JS-Code ziemlich groß wird.

Meine Frage: Gibt es irgendeine Möglichkeit, diese Codezeilen zu einem universellen Code zusammenzuführen? Hoffe, es gibt einen einfachen Weg zu tun, damit ich verstehen kann, was in meinem Anfänger Geist passiert!

Answer 1

Deshalb hat Javascript Funktionen. Sie ermöglichen es Ihnen, dasselbe oder fast dasselbe Verhalten zu verwenden und es in einen wiederverwendbaren Container zu verpacken. In Ihrem Beispiel ist alles identisch mit Ausnahme des Klassennamens der Schaltflächen und der Dokument-ID. Sie können also eine Funktion erstellen, die diese beiden Dinge als Argumente akzeptiert und dann den repetitiven Code ausführt. Zum Beispiel definieren, wenn Sie eine Funktion wie:

setPopup('paperCompanieButton', 'paperCompanieInfo') 
setPopup('pdfPreviewButton', 'paperJobPdf') 

so viele:

function setPopup(className, documentID) { 
    var buttons = document.getElementsByClassName(className); 

    for (var i = 0; i < buttons.length; i++) { 
     buttons[i].addEventListener('click', function() { 

     var greyOut = document.getElementById('greyOut'); 
     var popupWrapper = document.getElementById('popupWrapperFlex'); 
     var popup = document.getElementById(documentID); 

     greyOut.style.zIndex = '5'; 
     popupWrapper.style.zIndex = '6'; 
     popup.style.zIndex = '1'; 
     greyOut.style.opacity = '1'; 
     popupWrapper.style.opacity = '1'; 
     popup.style.opacity = '1'; 
     }); 
    } 
} 

Sie dann Ihre neue Funktion ohne Wiederholung alle den gleichen Code immer und immer wieder, einfach durch Aufruf mit neuen Argumenten verwenden können mal wie du willst.

Answer 2

Sie können diesen Code wie folgt Refactoring:

function setupButtonsPopups(buttonClassName, popupId) { 
    var buttons = document.getElementsByClassName(buttonClassName); 
    var popup = document.getElementById(popupId); 
    var greyOut = document.getElementById('greyOut'); 
    var popupWrapper = document.getElementById('popupWrapperFlex'); 

    for (var i = 0; i < buttons.length; i++) { 
     buttons[i].addEventListener('click', function() { 
      greyOut.style.zIndex = '5'; 
      popupWrapper.style.zIndex = '6'; 
      popup.style.zIndex = '1'; 
      greyOut.style.opacity = '1'; 
      popupWrapper.style.opacity = '1'; 
      popup.style.opacity = '1'; 
     }); 
    } 
} 

setupButtonsPopups('paperCompanieButton', 'paperCompanieInfo'); 
setupButtonsPopups('pdfPreviewButton', 'paperJobPdf'); 

Beachten Sie, dass der einzige Unterschied zwischen den zwei Teilen des Codes sind buttons class name und popup id. Also machen wir eine Funktion, die diese Argumente übernimmt und alle anderen Dinge kapselt.