Pasando variables en HTML y jQuery

Estoy usando el marco móvil jQuery; y usando el marco, tengo una grilla estructurada de la siguiente manera:

<div style="text-align: center;" class="ui-grid-b">

                    <div class="ui-block-a">
                        <a href="lengthDat.html"><img src="images/Longtail.jpg" width="200" height="200"></a>
                        <p style="display: inline;">Longtail</p>
                        <a href="longtail_info.html" rel="external" data-inline="true" data-role="button" 
                                data-mini="true"     data-iconpos="notext" data-icon="info">Longtail Info</a>
                    </div>

                    <div class="ui-block-b">
                        <a href="lengthDat.html"><img src="images/Northern_Dusky.jpg" width="200" height="200"></a>
                        <p style="display: inline;">Northern Dusky</p>
                        <a href="dusky_info.html" rel="external" data-inline="true" data-role="button" 
                                data-mini="true"     data-iconpos="notext" data-icon="info">Dusky Info</a>
                    </div>

                    <div class="ui-block-c">
                        <a href="lengthDat.html"><img src="images/Northern_Spring.jpg" width="200" height="200"></a>
                        <p style="display: inline;">Northern Spring</p>
                        <a href="spring_info.html" rel="external" data-inline="true" data-role="button" 
                                data-mini="true"     data-iconpos="notext" data-icon="info">Spring Info</a>
                    </div>

      .... SNIP 2 ROWS ....
</div>

Ahora, aquí está mi pregunta. Tengo todas las imágenes enlazadas a la misma página, pero son diferentes tipos de salamandras. Estoy tratando de obtener en qué tipo hacen clic, para poder usarlo en la página siguiente (la página de medidas).

¿Alguna ayuda?

preguntado el 02 de mayo de 12 a las 19:05

3 Respuestas

Puede dar a cada enlace una cadena de consulta y seleccionarla con un lenguaje del lado del servidor (óptimo) o javascript.

p.ej lengthDat.html?type=longtail, lengthDat.html?type=northern+dusky

Si desea saber cómo leer los parámetros de la cadena de consulta usando JavaScript, diríjase a esta pregunta SO: ¿Cómo puedo obtener valores de cadena de consulta en JavaScript?

contestado el 23 de mayo de 17 a las 13:05

Eso es bastante fácil, simplemente extraiga la extensión de la fuente img (si eso es lo que quiso decir con tipo y diferentes salamandras)

$('a').on('click', function(ev) {

    ev.preventDefault();

    var ext = $(this).children('img:eq(0)').attr('src').split('.').pop();

    window.location = '?type=' + ext;
});

contestado el 02 de mayo de 12 a las 19:05

Adjuntaría un atributo de tipo de datos a la etiqueta de la imagen y lo obtendría usando jquery y lo agregaría a la URL como se sugirió anteriormente.

var tipo = $('a').find('img').attr('tipo de datos'), url = $('a').attr('href'); $('a').attr('href', href += '?tipo=' + tipo);

Nota: tendrá que modificar este código para apuntar al elemento en particular en el que se hizo clic y es una buena práctica validar la URL, manejar las URL que ya tienen parámetros y las que no.

contestado el 02 de mayo de 12 a las 19:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.