Asignar un Valor con JS

TFirebird · #1 (**permalink**) 29/09/2012, 05:33

Hola a Todos:

Les cuento un poco que es lo que quiero hacer.
Tengo una lista, algo como esto pero mucho mas larga.

Código HTML:

<ul>

        <li class="apagado"><a href="#">1</a></li>
        <li class="apagado"><a href="#">2</a></li>
        <li class="apagado"><a href="#">3</a></li>
        <li class="apagado"><a href="#">4</a></li>
        <li class="apagado"><a href="#">5</a></li>

</ul>

Lo que quiero hacer con JS son dos cosas: una con css y otra con php
Cuando alguien presione alguno de los numeros, el css debe cambiar el class a activo, al mismo tiempo debe tomar un valor de variable para recuperar con php

$Variable = numero elegido o algun valor declarado antes

No tengo idea de como hacerlo, si alguien me puede ayudar

emprear · #2 (**permalink**) 29/09/2012, 07:31

Podrías hacer algo asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Cambiar Clase</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
 
.activo { 
text-decoration: line-through;
color:#FF0000;
} 
 
</style>
<script type="text/javascript">
    
// cambias la clase
var lista;
function CambiarClase(elemento){
if (lista)lista.className='';
elemento.className='activo';
alert(elemento.innerHTML); // aqui obtenés el número
lista=elemento;
 
//ahora necesitás ajax para recuperar la variable de tu php
 
}
</script>
</head>
<body>
<ul>
<li><a onclick="CambiarClase(this);" href="#">1</a></li>
<li><a onclick="CambiarClase(this);" href="#">2</a></li>
<li><a onclick="CambiarClase(this);" href="#">3</a></li>
</ul>
</body>
</html>

Aunque veo innecesario el uso del elemento a, bastaría
<li onclick="CambiarClase(this);">1</li>
y cursor: pointer; en el css

Saludos

TFirebird · #3 (**permalink**) 29/09/2012, 09:45

Graicas amigo por responder:

Yo no entiendo mucho de js, pero basandome en un ejemplo que he copiado y pegado de otro sitio, te pregunto con respecto a la variable, es posible que le pueda asignar algun valor a cada <li> y luego en la function de js definir una variable del tipo GLOBAL que guarde este valor y eso lo pueda usar en la pagina.

var lista;
function CambiarClase(elemento){
global $Valor ;
if (lista)lista.className='';
elemento.className='activo';
alert(elemento.innerHTML); // aqui obtenés el número
lista=elemento;
$Valor= El valor recuperable
}

por ejemplo si alguien apreta el numero dos apareceria debajo del listado:

Usted esta en la seccion: <?PHP echo $Valor ; ?>

Gracias por tu ayuda

emprear · #4 (**permalink**) 29/09/2012, 11:54

@TFirebird
acá hay una confusión
tu php podría escribir una variable de javascript, pero tu javascript no puede escribir una variable de php.
Dicho esto tu pregunta en concreto está mal enfocada

por ejemplo si alguien apreta el numero dos apareceria debajo del listado:

Usted esta en la seccion: <?PHP echo $Valor ; ?>
asumo que querés que aparezca "dos", es decir que la variable "valor" es una variable de javascript no de php.
Supongamos que debajo de la lista tenés un elemento a completar

Código HTML:

Ver original<li>
.... tu lista
</li>
<p>Usted está en la sección <strong id="numero_de_seccion"></strong></p>

en tu javascript reemplazás

Código Javascript:

Ver originalalert(elemento.innerHTML); // aqui obtenés el número

x

Código Javascript:

Ver originaldocument.getElementById('numero_de_seccion').innerHTML = elemento.innerHTML;

Te sugiero que empieces con algún manual de javascript, esto de copiar y pegar sin saber que es exactamente lo que se copia y pega puede sacarte del apuro un par de veces, pero no más

Saludos

TFirebird · #5 (**permalink**) 29/09/2012, 14:22

Gracias nuevamente por tomarte un tiempo en responder.
Mira por ahora estoy aprendiendo php y no quiero comenzar a estudiar otro lenguaje, aunque el js me parece super interesante.

Comeienzo de nuevo a ver si puedo hacerte entender mi idea, porque aplicando tu codigo todavia no hace lo que yo quiero.

Tengo un pequeña pagina en php que hace una consulta a mysql y quisiera que esa consulta sea a traves de esa lista.
Por ejemplo cuando apretas el boton 1 me traera de la base de datos, todo lo que encuentre sobre Deportes. es por eso que quiero lograr que sea una variable $valor

pero ademas quiero que al marcar el 1 ese uno este en otro color o que cambie el estilo del css. Todos los numeros estan en azul, y quiero que el que este activado quede en rojo, hasta que el usuario apriete otro numero.

Yo no entiendo nada de js y muy poco de php, es por eso que me resulta doblemente dificil poder hacer lo que digo

Desde ya mcuhas gracias.

emprear · #6 (**permalink**) 29/09/2012, 14:49

Entonces tenés que hacer una consulta a través de un form lo cual te llevaría a recargar la página con lo de que el efecto con javascript se pierde. Deberías recogerla varíable de php y según sea esta modificar los estilos. Por supuesto siempre existe la posibilidad de efectuar la consulta sin recargar la página, por medio de Ajax, pero aqui nos encontramos con otro problema, ajax es javascript, y como no es tu intención estudiar otro lenguaje.... En este punto entonces se abren nuevas alternativas, a saber:

A. Que copìes y pegues algún otro código que encuentres por la web, en una de esas te funciona
B. Que le encargues a otra persona que te realice la aplicación.
C. Que algún otro usuario de FDW te realice el trabajo en forma desinteresada

TFirebird · #7 (**permalink**) 29/09/2012, 15:21

OK, muchas gracias de todas formas...

Por las dudas tu no eres de los que lo haria desinteresadamente verdad. ajajaj es chiste.

Seguire buscando tal vez encuentre alguna otra cosa que me pueda servir.
Algo parecido a lo que quiero hacer es lo que hace la pagina de clarin aca:

http://www.clarin.com/estadisticas/futbol/primera-division.html#fixture