Javascript Segundo loop nunca executa

Question

Javascript Segundo loop nunca executa

votos

0

Eu tenho um script que esconde ou mostra um elemento após um número de segundos se passaram. Os elementos são todos dão a classe .show-after-x-secondsou .hide-after-x-secondse um atributo chamado data_secondscom o número de segundos.

Os primeiros itera percorrer todos os elementos com essa classe, mas o segundo ciclo parece ser ignorado. Eu tentei mudar sua ordem e apenas os primeiros executa laço.

<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';
    })
}

javascript html

Publicado 20/07/2017 em 14:54
usuário Greg

Em outras línguas...

1 respostas

Adam · Answer 1 · 2017-07-20 15:00

Isso vai lhe dizer o que você está fazendo de errado:

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

Você quer fazer

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

Além disso, mudar o seu atributo data_secondspara data-seconds. Ele ainda vai funcionar, mas data_secondsé um atributo de não-padrão. Você vai querer usar HTML5 data-atributos .