Question

我有不同的弹出窗口默认隐藏，并通过点击和Javascript魔术显示。因此，这导致我的初学者Javascript大脑在多行JS代码中看起来非常相似。

对于所有这些弹出框，我使用以下代码：

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

下一个看起来大致相同

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

问题是我不只是这两个弹出窗口，所以JS代码变得非常大。

我的问题：是否有可能将这些代码行合并为更通用的代码行？希望有一个简单的方法，所以我可以理解初学者的想法！

Answer 1

这就是Javascript具有功能的原因。它们允许您采取相同或几乎相同的行为，并将其打包到可重用的容器中。在您的示例中，除了按钮的类名和文档ID之外，一切都是相同的。因此，您可以创建一个函数，将这两个事物作为参数，然后执行重复的代码。例如，如果您定义如下函数：

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

然后，您可以使用新函数，而无需一遍又一遍地重复所有相同的代码，只需使用新参数调用它：

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

根据你的需要多次。

Answer 2

您可以像这样重构此代码：

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

请注意，代码的两个部分之间的唯一区别是buttons class name和popup id。所以让我们创建一个函数，它将接受这些参数并封装所有其他东西。

如何为不同的数组循环

2 个答案: