javascript - 如何简化全屏元素的 javascript 代码？

Question

我创建了一些按钮，这些按钮将触发表格以全屏模式显示。

每个按钮在 Javascript 中通过 ID 引用表格。甚至取消按钮也有自己的 ID。

它可以工作，但如果我想添加更多表，代码会很庞大。

此时我需要复制每个 var/function 并重新命名它们，如果我在一页中有很多表，这会使代码变得笨重。

正如您现在看到的，我必须复制 cancelFullScreen 并添加另一个 cancelFullScreen2 并且我必须对 customFullscreen 和 customFullscreen2。

理想情况下，JS 代码将保持不变，这样我就不必每次都重复它，我只需在 HTML 中添加新表格即可。

有没有办法简化这段 JS 代码，使其适用于具有特定类的所有表？每个表都有自己的按钮来展开/关闭。`(函数(){

var cancelFullScreen = document.getElementById("cancel-fullscreen");
if (cancelFullScreen) {
    cancelFullScreen.addEventListener("click", function () {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }, false);
}
var cancelFullScreen2 = document.getElementById("cancel-fullscreen-2");
if (cancelFullScreen2) {
    cancelFullScreen2.addEventListener("click", function () {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }, false);
}



var customFullscreen = document.getElementById("fullscreen-table")
    libraryFullscreen = document.getElementById("expand-fullscreen");

if (customFullscreen && libraryFullscreen) {
    libraryFullscreen.addEventListener("click", function (evt) {
        if (customFullscreen.requestFullscreen) {
            customFullscreen.requestFullscreen();
        }
        else if (customFullscreen.msRequestFullscreen) {
            customFullscreen.msRequestFullscreen();
        }
        else if (customFullscreen.mozRequestFullScreen) {
            customFullscreen.mozRequestFullScreen();
        }
        else if (customFullscreen.webkitRequestFullScreen) {
            customFullscreen.webkitRequestFullScreen();
        }
    }, false);
}


var customFullscreen2 = document.getElementById("fullscreen-table-2")
    libraryFullscreen2 = document.getElementById("expand-fullscreen-2");

if (customFullscreen2 && libraryFullscreen2) {
    libraryFullscreen2.addEventListener("click", function (evt) {
        if (customFullscreen2.requestFullscreen) {
            customFullscreen2.requestFullscreen();
        }
        else if (customFullscreen2.msRequestFullscreen) {
            customFullscreen2.msRequestFullscreen();
        }
        else if (customFullscreen2.mozRequestFullScreen) {
            customFullscreen2.mozRequestFullScreen();
        }
        else if (customFullscreen2.webkitRequestFullScreen) {
            customFullscreen2.webkitRequestFullScreen();
        }
    }, false);
}

})();`

https://codepen.io/MistaPrime/pen/vYBjjWX

Answer 1

使用 document.getElementsByClassName 或 document.getElementsByTagName 或 document.getElementsByName 选择多个元素。遍历元素并将您的点击处理程序添加到它们。没有更多的重复代码!