jquery将变量添加到href属性答案

【问题标题】：jquery adding variables to href attributejquery将变量添加到href属性
【发布时间】：2013-12-05 14:19:25
【问题描述】：

我确定这可能是我忽略的一些简单的事情，但我一生都无法弄清楚。非常感谢任何帮助。

HTML

<h1 class="entry-title">Installation Maintenance and Detailed Inspection</h1>
<div class="ai1ec-time">
    <div class="ai1ec-label">When:</div>
    <div class="ai1ec-field-value">January 13, 2014</div>
</div>
<div class="ai1ec-location">
    <div class="ai1ec-label">Where:</div>
    <div class="ai1ec-field-value">MOXI Perth</div>
</div>
<div class="ai1ec-cost">
    <div class="ai1ec-label">Cost:</div>
    <div class="ai1ec-field-value">AU$3200</div>    
</div>
<a id="booklink" title="Training Enrolement Form" href="http://www.moxi.com.au/training-enrolement-form/">Book Now!</a>

jQuery

<script>
jQuery(document).ready(function(){
    var bookcourse = jQuery(".entry-title").html;
    var booktime =  jQuery(".ai1ec-time .ai1ec-field-value").html;
    var booklocation =  jQuery(".ai1ec-location .ai1ec-field-value").html;
    var bookcost =  jQuery(".ai1ec-cost .ai1ec-field-value").html;
    jQuery("#booklink").attr('href',"http://www.moxi.com.au/training-enrolement-form?title="+bookcourse+"&cost="+bookcost+"&date="+booktime+"&location="+booklocation);
});
</script>

目标是将 href 属性输出为：

http://www.moxi.com.au/training-enrolement-form?title=Installation Maintenance and Detailed Inspection&cost=AU$3200&date=January 13, 2014&location=MOXI Perth

【问题讨论】：

为什么不使用text() ？如果您使用html()，您甚至可以在链接中包含 html 标记

标签： jquery href attr

【解决方案1】：

html() 是方法而不是属性，所以你需要使用.html() 而不是.html

var bookcourse = jQuery(".entry-title").html();
var booktime =  jQuery(".ai1ec-time .ai1ec-field-value").html();
var booklocation =  jQuery(".ai1ec-location .ai1ec-field-value").html();
var bookcost =  jQuery(".ai1ec-cost .ai1ec-field-value").html();

演示：Fiddle

【讨论】：

是的......像那样愚蠢的东西。绝对表明我盯着这个看太久了。

【解决方案2】：

试试

jQuery(document).ready(function(){
var bookcourse = $(".entry-title").html();
var booktime =  $(".ai1ec-time .ai1ec-field-value").html();
var booklocation =  $(".ai1ec-location .ai1ec-field-value").html();
var bookcost =  $(".ai1ec-cost .ai1ec-field-value").html();
jQuery("#booklink").attr('href', "http://www.moxi.com.au/training-enrolement-form?title=" + bookcourse + "&cost=" + bookcost + "&date=" + booktime + "&location=" + booklocation);

});

【讨论】：

【解决方案3】：

试试：

var href = $("#booklink").attr("href");
if (href.substr(0, href.length - 1) == "/") {
    href = href.substr(0, href.length - 1);
}
href += "?title=" + $(".entry-title").text();
href += "?cost=" + $(".ai1ec-cost .ai1ec-field-value").text();
href += "?date=" + $(".ai1ec-time .ai1ec-field-value").text();
href += "?location=" + $(".ai1ec-location .ai1ec-field-value").text();
$("#booklink").attr("href", href);

DEMO here.

【讨论】：

【解决方案4】：

试试这个

你也可以使用.text()方法

$(document).ready(function()
    var bookcourse = $(".entry-title").html();
    var booktime = $(".ai1ec-time .ai1ec-field-value").html();
    var booklocation = $(".ai1ec-location .ai1ec-field-value").html();
    var bookcost = $(".ai1ec-cost .ai1ec-field-value").html();
    $("#booklink").attr('href', "http://www.moxi.com.au/training-enrolement-form?title=" + bookcourse + "&cost=" + bookcost + "&date=" + booktime + "&location=" + booklocation);
});

【讨论】：

【解决方案5】：

.html() 是一个方法，你必须把它作为一个方法调用，所以你必须写

jQuery(".entry-title").html();

除此之外.html() 返回元素内的所有 html 标记，我认为您必须改用 text()，以便文本仅包含在您的 url 中

http://api.jquery.com/text/

【讨论】：