Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Adicionar uma class de CSS com JQuery / JS

por Henrique Rocha Almeida
| 94.5k xp | 7 posts

Oi pessoal, quero adicionar uma classe na tag img de uma lista de imagens que tenho, mas o log sempre retorna com erro. Não consegui entender pq o jQuery não reconhece a informação.

Código HTML

<ul class="img-timeline-li">
  <li class="img-li"><img src="img/time-line/1.jpg" class="time-line-img"></li>
  <li class="img-li"><img src="img/time-line/3.jpg" class="time-line-img"></li>
  <li class="img-li"><img src="img/time-line/5.jpg" class="time-line-img"></li>
</ul>

Código JS

function animeTimeline(elemento){
    var imagemArray = elemento.get();

    imagemArray.forEach(function(img, indice){
        console.log(img.addClass('minha-class'));
    });

};

const imagem = $('.time-line-img');
animeTimeline(imagem);

Agradeço a ajuda

3 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Natália tudo bem?

Poderia colocar seu projeto no github por gentileza, para podermos analisar melhor e ver o que está acontecendo.

por Gilson Teodoro Rodrigues
| 333k xp | 39 posts
Programador Delphi PL II

Eu acho que não entendi muito bem o que vc deseja fazer mais preparei um exemplo para tentar ajudar, O código esta abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <ul class="img-timeline-li">
        <li class="img-li"><img src="img/time-line/1.jpeg" class="time-line-img"></li>
        <li class="img-li"><img src="img/time-line/2.jpeg" class="time-line-img"></li>
        <li class="img-li"><img src="img/time-line/3.jpeg" class="time-line-img"></li>
    </ul>
    <button id="clica">
        Clica
    </button>
    <script src="js/jquery.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

Agora o CSS

.img-timeline-li{
  border: 1px;
}
.img-li{
    background-color: aliceblue;
}
.time-line-img{
    width: 100px;
}
.time-line-img-border{
  border-radius: 10px;
}

e o Java Script

$("#clica").click(animeTimeline);

function animeTimeline(){
    var img = $('img');
    img.addClass("time-line-img-border");
};

Para aplicar uma classe a um grupo de elementos html não precisa fazer necessariamente um loop. No exemplo que preparei todas a imagens iniciam com a largura igual a 100px e com as bordas quadradas. Quando clico no botão todas ela mudam as bordas para arredondadas. Espero ter ajudado

solução!
por Henrique Rocha Almeida
| 94.5k xp | 7 posts

Oi, obrigado pela dica! Consegui adicionar a função e colocar um setTimeOut também para que as imagens não entre de uma só vez.

var $target = $('.time-line-img'),
            animationClass = 'flip-top',
            offset = $(window).height() * 3/4;

    function EnterImg() {
        var documentTop = $(document).scrollTop();

        $target.each(function(e){
            var itemTop = $(this).offset().top;
            var $this = $(this);
            var t = setTimeout(function(){
                if (documentTop > itemTop - offset) {
                    $this.addClass(animationClass);
                }
            }, 1000 * e)
        });

    }

    EnterImg($target);