remover e inserir class com js | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Rodrigo Pereira Farias

| 207.6k xp | 74 posts

Pessoal, preciso da ajuda de vcs no JS abaixo, recebo uma numeração de 1 a 100 e para cada numero removo a classe para inserir uma class adequada e ele remove e insere apenas no primeiro item e nos demais, não funciona, ele apenas aplica o JS na primeira verificação. Alguém poderia me ajudar?

$(document).ready(function () {
    $("#analitic").each(function () {
        if ($(this).val() < 50) {
            //limpa class anterior
            $(this).removeAttr('class');
            //adiciona class desejada 
            $(this).addClass('progress-bar progress-bar-danger progress-animated wow animated animated');

        } else if ($(this).val() === 50) {
            //limpa class anterior
            $(this).removeAttr('class');
            //adiciona class desejada 
            $(this).addClass('progress-bar progress-bar-warning progress-animated wow animated animated');

        } else if ($(this).val() > 50) {
            //limpa class anterior
            $(this).removeAttr('class');
            //adiciona class desejada 
            $(this).addClass('progress-bar progress-bar-success progress-animated wow animated animated');
        }
    });
});

HTML

                                  <p class="font-600 m-b-5">Defensivos<span class="text-default pull-right">${analitico.totalDefensivoPercent}%</span></p>
                                    <div class="progress progress-bar-default-alt progress-sm m-b-20">
                                        <div id="analitic" value="${analitico.totalDefensivoPercent}" class="progress-bar progress-bar-default progress-animated wow animated animated" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: ${analitico.totalDefensivoPercent}%; visibility: visible; animation-name: animationProgress;">
                                        </div><!-- /.progress-bar .progress-bar-danger -->
                                    </div><!-- /.progress .no-rounded -->

                                    <p class="font-600 m-b-5">Agressivos<span class="text-default pull-right">${analitico.totalAgressivoPercent}%</span></p>
                                    <div class="progress progress-bar-default-alt progress-sm m-b-20">
                                        <div id="analitic" value="${analitico.totalAgressivoPercent}" class="progress-bar progress-bar-default progress-animated wow animated animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: ${analitico.totalAgressivoPercent}%; visibility: visible; animation-name: animationProgress;">
                                        </div><!-- /.progress-bar .progress-bar-pink -->
                                    </div><!-- /.progress .no-rounded -->

                                    <p class="font-600 m-b-5">Destros<span class="text-default pull-right">${analitico.totalDestroPercent}%</span></p>
                                    <div class="progress progress-bar-default-alt progress-sm m-b-20">
                                        <div id="analitic" value="${analitico.totalDestroPercent}" class="progress-bar progress-bar-default progress-animated wow animated animated" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: ${analitico.totalDestroPercent}%; visibility: visible; animation-name: animationProgress;">
                                        </div><!-- /.progress-bar .progress-bar-info -->
                                    </div><!-- /.progress .no-rounded -->

3 respostas

por Thaís Lescano

| 140.8k xp | 41 posts

04/12/2017

Oi Rodrigo! Acho que o maior problema é você usar o mesmo id em várias tags diferentes. IDs são únicos, cada página pode ter apenas um elemento com aquele ID. Se você estivesse buscando por uma classe '.classeX', todos elementos com essa classe seriam encontrados e teriam suas classes alteradas conforme você escreveu aí.

Se todos eles têm a mesma classe no início, você pode usar um for e pegar cada um pra fazer as mudanças que você quer

[...]
(for...)
var element = document.getElementsByClassName[i];
//codigo
[...]

deu pra entender? :}

por Rodrigo Pereira Farias

| 207.6k xp | 74 posts

04/12/2017

putz! não me atentei. fiz de outro jeito e deu certo.

$(document).ready(function () {
    $("span").each(function () {
        if ($(this).text() < 50) {
            //limpa class anterior
            $(this).removeAttr('class');
            //adiciona class desejada 
            $(this).addClass('progress-bar progress-bar-danger progress-animated wow animated animated');

        } else if ($(this).text() === 50) {
            //limpa class anterior
            $(this).removeAttr('class');
            //adiciona class desejada 
            $(this).addClass('progress-bar progress-bar-warning progress-animated wow animated animated');

        } else if ($(this).text() > 50) {
            //limpa class anterior
            $(this).removeAttr('class');
            //adiciona class desejada 
            $(this).addClass('progress-bar progress-bar-success progress-animated wow animated animated');
        }
    });
});

html

                                    <p class="font-600 m-b-5">Canhotos<span class="text-default pull-right">${analitico.totalCanhotoPercent}%</span></p>
                                    <div class="progress progress-bar-default-alt progress-sm m-b-20">
                                        <span class="progress-bar progress-bar-default progress-animated wow animated animated" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: ${analitico.totalCanhotoPercent}%; visibility: visible; animation-name: animationProgress;">
                                        <a style="display:none">${analitico.totalCanhotoPercent}</a></span><!-- /.progress-bar .progress-bar-warning -->
                                    </div><!-- /.progress .no-rounded -->

solução!

por Rodrigo Pereira Farias

| 207.6k xp | 74 posts

04/12/2017

Obrigado Thaís!!