Olá amigos, gostaria de saber como faço para 'getar' apenas o número de uma DIV?
É que assim, uso aquele sistema de reputação IPB (disponibilizado na BS eu acho, não me recordo onde peguei...) porém eu gostaria de aperfeiçoar aquele código, fazendo com que cada reputação tenha uma cor. No código disponibilizado la tem duas cores, se a reputação for 0 e a cor é preta, se for 1 ou mais é verde..
Tentei usar o código abaixo mas não deu muito certo xD

Código:

<div class="teste">Reputação: 1</div>

Código:

$(document).ready(function(){
   var reputacao = $(".teste").lenght;
   
   if (reputacao == 0) {
      $(".teste").css("background-color", "#393939");
   }
   else {
      $(".teste").css("background-color", "orange");
   }

});

Agradeço a atenção desde já

Link do meu fórum: http://mtaz.wikiforum.net/forum

Olá!

De acordo com o a <div> que apresentou, a forma mais fácil de saber o valor é:

Código:

var reputacao = $(".teste").split(': ')[1];

JS

Você quer que a cor mude lá no perfil IPB?

Disponibilize o código completo, pois somente esse código vai ser complicado entender e ajudar o que quer.

Até!

Bom, o código original é este

Código:

jQuery(document).ready(function(){
jQuery('.user-info .post_field:contains("Reputação")').attr('style','background-color: rgb(141, 177, 62)!important;background-image: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png);border-top-left-radius: 3px;border-top-right-radius: 3px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;color: rgb(255, 255, 255);font-weight: bold;display: block;margin: 0 auto;margin-bottom: 3px;padding: 3px 7px;text-align: center;text-shadow: rgba(0, 0, 0, 0.298039) 0px -1px 0px;background-position: 0px 1px;background-repeat: repeat no-repeat;');
jQuery('.user-info .post_field:contains("Reputação: 0")').attr('style','background-color: rgb(16, 16, 16)!important;background-image: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png);border-top-left-radius: 3px;border-top-right-radius: 3px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;color: #fff;font-weight: bold;display: block;margin: 0 auto;margin-bottom: 3px;padding: 3px 7px;text-align: center;text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;background-position: 0px 1px;background-repeat: repeat no-repeat;');
});

Ele esse sinal de reputação


Porém como eu falei, ele só apresenta duas cores de reputação, que seria o preto e o verde, eu to tentando fazer um código que faça o seguinte, veja a tabela abaixo

Reputação: 0 = Preto
Reputação: 1 ou mais = Vermelho
Reputação: 10 ou mais = Laranja
Reputação: 20 ou mais = Laranja (amarelado)
Reputação: 50 ou mais = Amarelo
Reputação: 70 ou mais = Verde (amarelado)
Reputação: 100 ou mais = Verde

Entendem? É fácil de fazer?

Bom, para testes na prática, o ideal é que você poste o nome do fórum em que usa esse sistema!

JS

JScript escreveu:Bom, para testes na prática, o ideal é que você poste o nome do fórum em que usa esse sistema!

JS

O meu fórum mesmo, http://mtaz.wikiforum.net/forum

Procurei mas não achei um link que tenha reputação, edita a mensagem acima e coloca um link direto ok?

JS

Olá!

É simples meu caro, em seu código, busque por isto:

Código:

jQuery('.user-info .post_field:contains("Reputação: 0")').attr('style','background-color: rgb(16, 16, 16)!important;background-image: url(http://i38.servimg.com/u/f38/17/31/71/58/highli10.png);border-top-left-radius: 3px;border-top-right-radius: 3px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;color: #fff;font-weight: bold;display: block;margin: 0 auto;margin-bottom: 3px;padding: 3px 7px;text-align: center;text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;background-position: 0px 1px;background-repeat: repeat no-repeat;');

Basta duplicar, e na parte "Reputação: 0" troca o "0" pelo número. Ao lado, poderá modificar o CSS dela.

Até!

@Crazy Desta maneira meu código ficaria enorme, minha intenção é deixar ele o mais curto possível xD
@JScript Acabei cometendo o equivoco de deixar a reputação disponível apenas para os membros do fórum xD
Ja deixei visível para visitantes, pode ver aqui, http://mtaz.wikiforum.net/t50-regras-forum-mtaz

Ok, agora sim, posso fazer os testes e otimizar este código!

JS

Crazy, e você sugere que ele faça isso para todos os pontos de reputação?? Imagina uma pessoa com 1000 pontos?

@Wagner'

Troque o código que está usando por este:

Código:


jQuery(document).ready(function(){
    var target = jQuery('.user-info .post_field:contains("Reputação")');
   
    target.addClass('reput');
   
    target.each(function(index) {
        var oThis = $(this);
        var Reputation = oThis.text().split(': ')[1];

        if (Reputation == 0) {
            oThis.addClass('black');
        } else if (Reputation > 0 && Reputation < 10) {
            oThis.addClass('red');
        } else if (Reputation >= 10 && Reputation < 20) {       
            oThis.addClass('orange');
        } else if (Reputation >= 20 && Reputation < 50) {
            oThis.addClass('orange2');
        } else if (Reputation >= 50 && Reputation < 70) {
            oThis.addClass('yelow');
        } else if (Reputation >= 70 && Reputation < 100) {
            oThis.addClass('green');
        } else if (Reputation >= 100) {
            oThis.addClass('green2');
        }
    });
});


Adicione em seu CSS:

Código:


.post_field.reput.black {
  background-color: #363636 !important;
}
.post_field.reput.red {
  background-color: #FF0000 !important;
}
.post_field.reput.orange {
  background-color: #FF6600 !important;
}
.post_field.reput.orange2 {
  background-color: #FFB600 !important;
}
.post_field.reput.yelow {
  background-color: #FBFF00 !important;
}
.post_field.reput.green {
  background-color: #D0FF00 !important;
}
.post_field.reput.green2 {
  background-color: #7CB32E !important;
}

.post_field.reput {
  background-position: 0 1px;
  background-repeat: repeat no-repeat;
  border-radius: 3px 3px 3px 3px;
  color: #FFFFFF;
  display: block;
  font-weight: bold;
  margin: 0 auto 3px;
  padding: 3px 7px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.298);
}


JS

Muito bom Js, funcionou perfeitamente