Pasando variables en HTML y jQuery

I am using the jQuery mobile framework; and using the framework, I have a grid structured as follows:

<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>

Now, here is my question. I have all of the images link to the same page, but they are different types of salamanders. I am trying to get which type they click on, so I can use it on the next page (the measurement page).

¿Alguna ayuda?

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

3 Respuestas

You can give each link a query string and pick it up with either a server-side language (optimal) or javascript.

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

If you want to know how to read the query string parameters using JavaScript, head on over to this SO question: ¿Cómo puedo obtener valores de cadena de consulta en JavaScript?

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

That's quite easy, just extract the extension from the img source (if that's what you meant by type and different salamanders)

$('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

I would attach a data-type attribute to the image tage and get it using jquery and append to the url as suggested above.

var type = $('a').find('img').attr('data-type'), url = $('a').attr('href'); $('a').attr('href', href += '?type=' + type);

Note: You will have to tweak this code to target the particular element clicked and it is good practice to validate the url, handle urls that already have parameters and ones that don't.

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.