Can't figure out why the loop is not working
Question
I know that there are countless questions about for loops or equivalent in JavaScript but I can't figure out how to make this one work.
<!-- Comes from https://github.com/sindresorhus/screenfull.js/edit/master/index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/5.0.2/screenfull.min.js"></script>
</head>
<body>
<img id = "img1" src="https://placeimg.com/200/150/nature" alt="">
<img id = "img2" src="https://placeimg.com/200/150/nature/2" alt="">
<button id="test">Click</button>
<script>
// WORKS:
// $(function () {
// $('#img1').click(function () {
// screenfull.request($('#img1')[0]);
// });
// });
var ids = ["#img1", "#img2", "#test"];
var item;
for (item of ids) {
$(function () {
$(item).click(function()) {
screenfull.request($(item)[0]);
}
})
}
</script>
</body>
</html>
Expected output: clicking on either of the two images should put it fullscreen. Any idea? (I started with a for loop but I accept other solutions.)
I won't know the number of items in advance (nor their names) so the solution has to work with this specificity.
1 answers
solution1
2 ACCPTED 2020-12-11 19:35:09
Just make a selector with both ids
$('#img1, #img2').click(function () {
screenfull.request(this);
});
with an array
var imgs = ['#img1', '#img2'];
$(imgs.join(',')).click(function () {
screenfull.request(this);
});
if you want to loop and reinvent what jQuery does for you
var imgs = ['#img1', '#img2'];
imgs.forEach(function(id){
$(id).click(function () {
screenfull.request(this);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.