alterar a cor do texto da label todos os nomes

[rafa-martin 2]

boa noite. estou trazendo uma lista de nomes do banco de dados, conforme abaixo.

 

<?php

aqui loop

?>

                        <a class="font-cat" style="text-decoration:none; color:#151515" href="produtos.php?id=<?php echo $rs->ID;?>&p=<?php echo $op;?>">
                        <div id="categoria" class="col-md-12" style="margin: 4px 0px 0px 0px;background:#FEF9A8;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;">
                            <p id="p_categoria" align="left" style="font-family:Arial;color:#000;font-size: 13px;font-weight:bold;"><label id="l_categoria_<?php echo $rs->ID;?>" for="lcategoria"><?php echo $rs->nome;?></label></p>
                            <img style='float:right;width:24px;height:23px; margin-top:-30px;' src="seta.png" />
                        </div>
                        </a>

<?php

fim loop

?>

 

ao clicar num botão eu mudo a cor do texto via javascipt da seguinte forma: document.getElementById('l_categoria').style.color = color;

 

No entanto, só está mudando a cor do texto para o primeiro nome, justamente pq junto com o ID de cada nome, como posso fazer via javascript para poder alterar a cor do texto de todos os nomes que vier do banco de dados?

[marsolim 110]

tu botou isso numa função js? se for tu pode passar a id ou a cor do elemento na chamada da função exemplo

 

<img src="img.jpg" id="img1" onclick="mudar(this.id, 'red');">

<script>
    function mudar(id, cor){
        document.getElementById(id).style.color = cor;
    }
</script>

 

pelo que entendi é mais ou menos por aí

[rafa-martin 2]

só meu botão está fora do loop.

[marsolim 110]

ainda não entendi. eu não curto misturar html e php fica confuso na hora de ler e tu ainda não encodou o código pra facilitar. eu uso montar uma variável com a string e depois dou um echo nela acho melhor que ficar misturando php e html mais fácil pra ler tipo

$str = "lista qualquer<ol>";

foreach($origem => $destino){
    $str .= "<li>", $destino, "</li>";
}

$str .= "</ol>";

echo $str;

 

eu acho isso mais fácil de montar, de gerenciar, de corrigir falhas e tal, claro que é só um exemplo demonstrativo.

[rafa-martin 2]

vamos lá. eu trago do banco uma lista de nomes, dentro de um div. por exemplo:

 

loop

   <div id="nome_id-banco"> nome-banco-de-dados </div>

end loop

 

eu preciso mudar a cor do texto nome. então faço assim  document.getElementById('l_categoria').style.color = color. funciona perfeitamente. só que altera só para o primeiro nome. eu preciso mudar o texto para todos os nomes que vem do banco. entendeu?

[marsolim 110]

mas é uma cor só pra todos ou cada um tem uma? e de onde deve vir essa cor? bota um exemplo aí como ficaria a saída do conjunto desse loop. 

[rafa-martin 2]

a cor passo como parâmetro. <a class="blue" href="#" onclick="setColor('blue');"></a>

[marsolim 110]

se tu bota uma classe não precisa de js pode fazer em css

<style>
    .blue{
        color: blue
    }
</style>

 

mas tu não disse se é só essa a cor ou se tem mais e de onde elas vem porque se for só essa pode ser desse jeitim que passei aí

[rafa-martin 2]

as cores eu posso mudar. posso enviar "n" cores. por isso faço via javascript. está dessa forma.

 

                        <li><a class="blue" href="#" onclick="setColor('blue');"></a></li> <!-- #368ee0 -->
                        <li><a class="red" href="#" onclick="setColor('red');"></a></li> <!-- #e51400 -->
                        <li><a class="green" href="#" onclick="setColor('green');"></a></li> <!-- #393 -->
                        <li><a class="orange" href="#" onclick="setColor('orange');"></a></li> <!-- #f8a31f -->
                        <li><a class="yellow" href="#" onclick="setColor('yellow');"></a></li> <!-- #ebe810 -->
                        <li><a class="pink" href="#" onclick="setColor('pink');"></a></li> <!-- #f359a8 -->
                        <li><a class="magenta" href="#" onclick="setColor('magenta');"></a></li> <!-- #a200ff -->
                        <li><a class="gray" href="#" onclick="setColor('gray');"></a></li> <!-- #aaa -->
                        <li><a class="black" href="#" onclick="setColor('black');"></a></li> <!-- #000 -->
                        <li><a class="white" href="#" onclick="setColor('white');"></a></li> <!-- #fff -->
                        <li><a class="dark_red" href="#" onclick="setColor('#940303');"></a></li> <!-- #940303 -->
 

veja que a cada um que eu clico, posso enviar essas cores acima. essas cores serão do texto, conforme eu escolher. só que a lista de nomes é dinâmica. pode vir um, como pode vir mil. então quando clicar na cor green, por exemplo, então a font dos 1000 nomes tem que mudar para a cor green. entendeu agora?

[marsolim 110]

ainda acho que pode fazer em css basta criar uma chave pra cada cor, o bloco style fica um pouco longo mas poupa trabalho e processamento do js porque não vai precisar clicar em nada e nem correr o js ou então se cada uma li vai mudar para a cor que a ela foi passada tu pode alterar aquela função js que passei para pegar o número de elementos que o loop trouxe e usar ele pra mudar as cores e aí tu passa um número na id do elemento tipo

 

<li><a class="blue" id="id_0" href="#" onclick="setColor('blue');"></a></li> <!-- #368ee0 -->
<li><a class="red" id="id_1" href="#" onclick="setColor('red');"></a></li> <!-- #e51400 -->
<li><a class="green" id="id_2" href="#" onclick="setColor('green');"></a></li> <!-- #393 -->

 

pode usar um $n pra ir incrementando ele no loop pra passar ele na id e acredito que esses dados vem duma array então tu pode pegar a quantidade de elementos da array e passar ela na função tipo

 

$total = count($nome_da_array); //isso vem antes do loop
$n = 0; //isso vem antes do loop
...
for(...){
    echo "<li><a class=" . $array['cor'] . " id="id_" . $n . " href="#" onclick="setColor(" . $total . ");></a></li>";
    $n += 1;
}

 

e no js...

 

<script>
    function setColor(total){
        for(i = 0; i <= total; i++){
            document.getElementById('id_' + i).style.color = document.getElementById('id_' + i).getAttribute("class");
        }
    } 
</script>

 

acredito que isso funfa... é só uma amostragem pra adaptar aí