视频元素索引的提取及其在函数中的应用

Question

我有两个视频元素在一个页面上，将或不会显示基于视口大小。其中每一个都有自己的play按钮，这会触发一些函数，这些函数使用索引来针对特定的玩家。我想知道是否有更好的方法，如果迭代播放按钮，然后应用正确的索引？

$(window).resize(function () {
    if ($(this).width() > 768) {
        $(".toggle-1").on("click", function () {
            playPause(0);
            anotherFun(0)
        });
    } else {
        $(".toggle-2").on("click", function () {
            playPause(1);
            evenMoreFun(1)
        });
    }
});

function playPause(index) {
    // player[index].togglePlay();
}
function anotherFun(index) {
    // code[index]
    // more stuff
}
function evenMoreFun(index) {
    // code[index]
    // more stuff
}   

Answer 1

使用IDs而不是索引：

$(window).resize(function () {
    if ($(this).width() > 768) {
        $(".toggle-1").on("click", function () {
            playPause("vid1");
            anotherFun("vid1")
        });
    } else {
        $(".toggle-2").on("click", function () {
            playPause("vid2");
            evenMoreFun("vid2")
        });
    }
});



function playPause(id) {
    const element = document.getElementByID(id)
    element.togglePay()
}
function anotherFun(id) {
    const element = document.getElementByID(id)
    // do stuff on element
}
function evenMoreFun(id) {
    const element = document.getElementByID(id)
    // do stuff on element
}   

只需确保将ID作为字符串传递到playPause和anotherFun中。