JavaScript Second for循环永远不会执行

Question

I have a script that hides or shows an element after a number of seconds have elapsed. The elements are all give the class .show-after-x-seconds or .hide-after-x-seconds and an attribute called data_seconds with the number of seconds.

The first loop iterates through all the elements with that class but the second loop seems to be ignored. I tried switching their order and only the first loop executes.

<div class="hide-after-x-seconds" data_seconds="2">
    <img src="/static/img1.png">
</div>
<div class="show-after-x-seconds" style="display: none" data_seconds="4">
    <img src="/static/img2.png">
</div>

var show_these = $('.show-after-x-seconds');
for(var show in show_these) {
    show_this(show_these[show], parseInt(show_these[show].attributes.data_seconds.value));
}
var hide_these = $('.hide-after-x-seconds');
for(var hide in hide_these) {
    hide_this(hide_these[hide], parseInt(hide_these[hide].attributes.data_seconds.value));
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
function hide_this(element_to_hide, x){
    sleep(x *1000).then(() => {
        element_to_hide.style.display = 'none';
    })
}
function show_this(element_to_show, x){
    sleep(x *1000).then(() => {
        element_to_show.style.display = 'block';
    })
}

Answer 1

This will tell you what you're doing wrong:

var hide_these = $('.hide-after-x-seconds');
for(var hide in hide_these) {
    console.log(hide_these[hide]);
}

You want to do

$('.hide-after-x-seconds').each(function() {
   hide_this(this,this.getAttribute('data-seconds'));
});

Also, change your attribute data_seconds to data-seconds . It'll still work, but data_seconds is a non-standard attribute. You'll want to use HTML5 data- attributes .