Ayuda con código Javascript+PHP

StRoYeR · #1 (**permalink**) 17/02/2008, 13:45

Hola a tod@s, necesito ayuda con esta parte de código.

Tengo una tabla con varias imagenes (cartas) y una vez se distribuyen aleatoriamente (usando PHP)...

Código:

<td><img src="./images/cards/back.jpg" name="card7" width="80" height="130" onClick="document.card7.src='./images/cards/<? echo $VarArray[6]; ?>.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card8" width="80" height="130" onClick="document.card8.src='./images/cards/<? echo $VarArray[7]; ?>.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card9" width="80" height="130" onClick="document.card9.src='./images/cards/<? echo $VarArray[8]; ?>.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card10" width="80" height="130" onClick="document.card10.src='./images/cards/<? echo $VarArray[9]; ?>.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card11" width="80" height="130" onClick="document.card11.src='./images/cards/<? echo $VarArray[10]; ?>.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card12" width="80" height="130" onClick="document.card12.src='./images/cards/<? echo $VarArray[11]; ?>.gif';"></td>

seleccionando una carta cualquiera, cambia la imagen del reverso de la carta por la que tiene que mostrar.

Por si es necesario aquí muestro tal como se vería en el navegador (es un ejemplo):

Código:

<td><img src="./images/cards/back.jpg" name="card1" width="80" height="130" onClick="document.card1.src='./images/cards/26.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card2" width="80" height="130" onClick="document.card2.src='./images/cards/6.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card3" width="80" height="130" onClick="document.card3.src='./images/cards/30.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card4" width="80" height="130" onClick="document.card4.src='./images/cards/14.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card5" width="80" height="130" onClick="document.card5.src='./images/cards/20.gif';"></td>
<td><img src="./images/cards/back.jpg" name="card6" width="80" height="130" onClick="document.card6.src='./images/cards/1.gif';"></td>

Ahora quiero que las cartas seleccionadas vayan a parar a un array pero no se como hacerlo. Tengo que comparar si la carta seleccionada ya existe en el array, ya que parece ser que al darle click sobre una carta que ya se le haya dado la vuelta aún es posible colocarla en ese array con lo que estaría repetida.

¿Cómo puedo conseguir esto?

Gracias por adelantado.

Saludos.

Panino5001 · #2 (**permalink**) 17/02/2008, 16:53

No comprendo bien dónde querés hacer la comparación: en php, en js?
Si la comparación es en php, conviene mandar este mensaje al foro de ajax. Si es en js, deberías indicar donde iniciás el array js contra el cual comparar. En fin, se necesita más información para ayudarte.

Entretanto, fijate si esto te sirve:

Código PHP:

  <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
Array.prototype.in_array=function(){
    for(var j in this){
        if(this[j]==arguments[0]){
            return true;
        }
    }
    return false;    
}
var vec=[];
function guardarYComprobar(elem){
if(vec.in_array(elem)){
alert('nop');
}else{
vec.push(elem)
}
}
</script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td><img src="./images/cards/back.jpg" name="card1" width="80" height="130" onclick="this.src='./images/cards/26.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card2" width="80" height="130" onclick="this.src='./images/cards/6.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card3" width="80" height="130" onclick="this.src='./images/cards/30.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card4" width="80" height="130" onclick="this.src='./images/cards/14.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card5" width="80" height="130" onclick="this.src='./images/cards/20.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card6" width="80" height="130" onclick="this.src='./images/cards/1.gif';guardarYComprobar(this.src)"></td>
</table>
</body>
</html>

StRoYeR · #3 (**permalink**) 20/02/2008, 13:12

Cita:

Iniciado por Panino5001

No comprendo bien dónde querés hacer la comparación: en php, en js?
Si la comparación es en php, conviene mandar este mensaje al foro de ajax. Si es en js, deberías indicar donde iniciás el array js contra el cual comparar. En fin, se necesita más información para ayudarte.

...

Gracias Panino realmente me sirvió era exactamente lo que quería: hacer que el código se diera cuenta que ya estaba seleccionada una imagen. Ahora supongo que me tocará hacer algunas modificaciones de la parte PHP jeje.

Saludos

Panino5001 · #4 (**permalink**) 20/02/2008, 15:05

Me alegra que te sirviera ;)

StRoYeR · #5 (**permalink**) 25/02/2008, 14:04

Cita:

Iniciado por Panino5001

Me alegra que te sirviera ;)

Gracias

, hay una cosa que no entiendo sobre la estructura del array en Javascript. Resulta que necesito interactividad con PHP, es decir, ¿puedo hacer que a la vez que se comprueba si una carta ya ha sido seleccionada de mandarla a un array en PHP desde javascript?

Panino5001 · #6 (**permalink**) 25/02/2008, 16:17

Sí, es posible, pero usando alguna técnica de AJAX, como inclusión DOM, IFRAME o XMLHttpRequest. Te ayudarán mejor en ese foro.

StRoYeR · #7 (**permalink**) 26/02/2008, 11:00

Gracias de nuevo Panino, así lo haré a ver si consigo terminar esa página a tiempo

Saludos.

StRoYeR · #8 (**permalink**) 28/02/2008, 14:03

Cita:

Iniciado por Panino5001

Sí, es posible, pero usando alguna técnica de AJAX, como inclusión DOM, IFRAME o XMLHttpRequest. Te ayudarán mejor en ese foro.

He rectificado mi post ya que se me ha ocurrido algo pero no se me ocurre como se puede implementar en Javascript. Ya que el código que se encarga de comprobar si una imagen ya se ha seleccionado, ¿Cómo puedo saber que valores hay (por separado) en el array hecho en Javascript?

Código PHP:

  <script>
Array.prototype.in_array=function(){
    for(var j in this){
        if(this[j]==arguments[0]){
            return true;
        }
    }
    return false;    
}
var vec=[];
function guardarYComprobar(elem){
if(vec.in_array(elem)){
alert('nop');
}else{
vec.push(elem)

<form action="archivo.php" method="post">
<input type="hidden" name="arreglo" value="" />
</form>
}
}
</script>

Código PHP:

  <body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td><img src="./images/cards/back.jpg" name="card1" width="80" height="130" onclick="this.src='./images/cards/26.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card2" width="80" height="130" onclick="this.src='./images/cards/6.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card3" width="80" height="130" onclick="this.src='./images/cards/30.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card4" width="80" height="130" onclick="this.src='./images/cards/14.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card5" width="80" height="130" onclick="this.src='./images/cards/20.gif';guardarYComprobar(this.src)"></td>
<td><img src="./images/cards/back.jpg" name="card6" width="80" height="130" onclick="this.src='./images/cards/1.gif';guardarYComprobar(this.src)"></td>
</table>
</body>
</html>

¿Qué es lo que se guarda en el array un valor numérico o una cadena de texto? ¿Cómo puedo sacar un valor en concreto de ese array?

Me interesaría enviarlo a una página PHP como una variable de este modo para guardarlo (ejemplo):

Código PHP:

  archivo.php?valor=3

En caso de que no se pudiera hacer de esta forma por guardarse como cadena de texto y aprovechando que todas las imagenes estan ordenadas ya buscaría la forma para eliminar la parte de texto, pero por el momento el problema que tengo es este.

Saludos.