Javascript 第二个 for 循环永远不会执行

Question

我有一个脚本，可以在几秒钟后隐藏或显示元素。这些元素都具有类 .show-after-x-seconds 或 .hide-after-x-seconds 以及名为 data_seconds 的属性与秒数。

第一个循环迭代该类的所有元素，但第二个循环似乎被忽略。我尝试切换它们的顺序，但只执行第一个循环。

<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

这会告诉你你做错了什么:

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

你想做

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

此外，将属性 data_seconds 更改为 data-seconds。它仍然有效，但 data_seconds 是一个非标准属性。您需要使用 HTML5 data- attributes .