在HTML和jQuery中传递变量

Question

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

Any help?

Answer 1

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

eg 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: How can I get query string values in JavaScript?

Answer 2

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;
});

Answer 3

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.