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。

Javascript Second for循环从不执行

1 个答案: