在 HTML 和 jQuery 中传递变量答案

【问题标题】：Passing variables in HTML & jQuery在 HTML 和 jQuery 中传递变量
【发布时间】：2012-05-02 18:17:11
【问题描述】：

我正在使用 jQuery 移动框架；并使用该框架，我的网格结构如下：

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

现在，这是我的问题。我有所有图片链接到同一页面，但它们是不同类型的蝾螈。我正在尝试获取他们点击的类型，以便我可以在下一页（测量页面）上使用它。

有什么帮助吗？

【问题讨论】：

标签： javascript jquery html var

【解决方案1】：

您可以为每个链接提供一个查询字符串，然后使用服务器端语言（最佳）或 javascript 来获取它。

例如lengthDat.html?type=longtail, lengthDat.html?type=northern+dusky

如果您想知道如何使用 JavaScript 读取查询字符串参数，请继续阅读这个 SO 问题：How can I get query string values in JavaScript?

【讨论】：

【解决方案2】：

这很简单，只需从 img 源中提取扩展名（如果这就是您所说的类型和不同的蝾螈）

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

    ev.preventDefault();

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

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

【讨论】：

【解决方案3】：

我会将数据类型属性附加到图像标签并使用 jquery 获取它并按照上面的建议附加到 url。

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

注意：您必须调整此代码以针对单击的特定元素，并且验证 url、处理已经有参数和没有参数的 url 是一种很好的做法。

【讨论】：