0

Tengo un codigo que coge crea varios td dandoles una clase="td", tras esto, con JS lo que quiero es darle un estilo a cada uno al pasar por encima, lo que pasa es que a pesar de funcinarme lo que me hace es darselo a todos a la vez, es decir segun paso por encima de cualquiera de ellos, se ejecuta para todos los botones. El codigo es el siguiente:

HTML: Estoy poniendo la parte que me interesa no todo el codigo pero solo esta usandose aqui por lo que creo que no hara falta lo demas ya que no tiene nada que ver

  public function crearTds($totalLadrillos){

           $textoArrLength = count($this->textoArr);

            for($i = 0; $i < $totalLadrillos; $i++){

                $this->td[] = '<td class="td" onmouseover="cambiarCSS()">'.$this->textoArr[rand(0, $textoArrLength-1)].'</td>';
              
            }
        }

JS:

const buttons = document.querySelectorAll(".td");  

   
    function cambiarCSS(){

        for(i = 0; i < buttons.length; i++){

            buttons[i].setAttribute("class", "tdHover");

        }

    }
     
3
  • Es algo parecido a es.stackoverflow.com/questions/496512/… podrías terminarla
    – Vicent
    Commented el 12 nov. 2021 a las 8:43
  • La cosa es que ahora tengo que hacerlo para varios, he eliminado esa pregunta y he dejado esat que si que es lo que queria decir desde el principio, lo sienti Commented el 12 nov. 2021 a las 8:49
  • Si quieres cambiarle el estilo a cada uno por separado deberás gastar una clase diferente o un id único para cada uno.
    – Vicent
    Commented el 12 nov. 2021 a las 9:05

1 respuesta 1

1

Puedes implementar este pequeño truco. Pasarle un ID calculado al método cambiarCSS y asignarle ese ID al <td>. No he probado el código. Es posible que contenga errores, pero tiene que ser algo como esto:

for($i = 0; $i < $totalLadrillos; $i++){

   $this->td[] = '<td id="button'.$id.'" onmouseover="cambiarCSS('.$id.')">'.$this->textoArr[rand(0, $textoArrLength-1)].'</td>';
              
}

Luego:

function cambiarCSS(id){
    const button = document.querySelector("#button"+id); 
    button.setAttribute("class", "tdHover");
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.