Olá amigos, estou passando por dificuldade com os operadores lógicos aqui
É o seguinte eu tenho minha página HTML e nela eu tenho uma tabela vejam..
Notem que nessa tabela temos a coluna status e logo abaixo o status do jogador. Existem 3 possíveis status, Survivor, Hero e Bandit
Funciona assim
Se a humanidade for igual ou maior que 1 e menor que 4999 o cara é Survivor
Se a humanidade for igual ou maior que 5000 o cara é Hero
Se a humanidade for igual ou menor que 0 o cara é Bandit
Quero que dependendo do status dele seja adicionada uma class (para definir a cor de fundo) e seja alterado o texto da coluna para o seu status
Tenho o seguinte HTML
Este CSS
E o seguinte JQuery
Alguém sabe onde posso estar errando?
Agradeço a atenção desde já!
É o seguinte eu tenho minha página HTML e nela eu tenho uma tabela vejam..
Notem que nessa tabela temos a coluna status e logo abaixo o status do jogador. Existem 3 possíveis status, Survivor, Hero e Bandit
Funciona assim
Se a humanidade for igual ou maior que 1 e menor que 4999 o cara é Survivor
Se a humanidade for igual ou maior que 5000 o cara é Hero
Se a humanidade for igual ou menor que 0 o cara é Bandit
Quero que dependendo do status dele seja adicionada uma class (para definir a cor de fundo) e seja alterado o texto da coluna para o seu status
Tenho o seguinte HTML
- Código:
<table>
<tbody>
<tr>
<th>Jogador</th>
<th>Murders</th>
<th>Humanidade</th>
<th>Online</th>
<th>Status</th>
</tr>
<tr>
<td>Wagão</td>
<td>2</td>
<td><span class="humanidade">2000</span></td>
<td>10</td>
<td class="status button"></td>
</tr>
<tr>
<td>Maik</td>
<td>0.5</td>
<td><span class="humanidade">-1</span></td>
<td>1</td>
<td class="status button"></td>
</tr>
<tr>
<td>Neves</td>
<td>0</td>
<td><span class="humanidade">6000</span></td>
<td>1</td>
<td class="status button"></td>
</tr>
</tbody>
</table>
Este CSS
- Código:
.button{
border-width: 1px;
padding: 3px 15px;
border-style: solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font: 10px "Arial";
line-height: 1.35;
margin: 5px;
font: 10px "Arial";
font-weight: bold;
text-transform: uppercase;
display: block;
text-align: center;
}
.green{
background: #05a605;
background: -moz-linear-gradient(top, #73c973 0, #73c973 1px, #33b033 1px, #05a605 100%);
background: -o-linear-gradient(top, #73c973 0, #73c973 1px, #33b033 1px, #05a605 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #73c973), color-stop(5%, #73c973), color-stop(5%, #33b033), color-stop(100%, #05a605));
background: linear-gradient(top, #73c973 0%,#73c973 1px,#33b033 1px,#05a605 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33b033', endColorstr='#05a605',GradientType=0 );
border-color: #048c04;
color: #FFF;
}
.red{
background: #a60505;
background: -moz-linear-gradient(top, #c97373 0, #c97373 1px, #b03333 1px, #a60505 100%);
background: -o-linear-gradient(top, #c97373 0, #c97373 1px, #b03333 1px, #a60505 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c97373), color-stop(5%, #c97373), color-stop(5%, #b03333), color-stop(100%, #a60505));
background: linear-gradient(top, #c97373 0%,#c97373 1px,#b03333 1px,#a60505 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b03333', endColorstr='#a60505',GradientType=0 );
border-color: #8c0404;
color: #FFF;
}
.yellow{
background: #a67e05;
background: -moz-linear-gradient(top, #c9b473 0, #c9b473 1px, #b09133 1px, #a67e05 100%);
background: -o-linear-gradient(top, #c9b473 0, #c9b473 1px, #b09133 1px, #a67e05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c9b473), color-stop(5%, #c9b473), color-stop(5%, #b09133), color-stop(100%, #a67e05));
background: linear-gradient(top, #c9b473 0%,#c9b473 1px,#b09133 1px,#a67e05 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b09133', endColorstr='#a67e05',GradientType=0 );
border-color: #8c6a04;
color: #FFF;
}
E o seguinte JQuery
- Código:
jQuery(document).ready(function(){
var target = jQuery('.humanidade');
target.each(function(index) {
var humanidade = jQuery('.humanidade').text();
var status = jQuery('.status');
if (humanidade > 1 && humanidade < 4999) {
status.addClass('yellow');
status.text('Survivor');
}
else if (humanidade >= 5000) {
status.addClass('green');
status.text('Hero');
}
else if (humanidade <= 0) {
status.addClass('red');
status.text('Bandit');
}
});
});
Alguém sabe onde posso estar errando?
Agradeço a atenção desde já!