I have 2 video elements on a page that will or wont be displayed based on viewport size. Each of these will have their own play button which triggers a number of functions that are using an index to target a specific player. I'm wondering if there is a better way if iterating through the play buttons and then applying the correct index?
$(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
}
Use IDs instead of indexies:
$(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
}
Just make sure that you pass the ID as a string in your playPause and anotherFun