如何使用jquery从<a>标签获取完整的url答案

【问题标题】：How to get full url from <a> tag using jquery如何使用jquery从<a>标签获取完整的url
【发布时间】：2014-02-18 07:00:40
【问题描述】：

我有一个通知div。当有人点击其中一个链接时，通知的数量将会改变，之后用户将被重定向到他点击的链接。这是div中的php脚本。

<?php
 while($row = stmt->fetch(PDO::FETCH_OBJ))
 {
 echo "<p><a href='http://example.com/blog/index.php?t_id=".$t_id."&c_id=".$c_id."'>".$title."</a></p>";
 }
?>

我在 div 中使用以下 Jquery：

<script>
 $('p').click(function(event){
 event.preventDefault();

 $.ajax({
 type: "POST",
 url: "http://www.example.com/change_notification.php"
 })
 .done(function( msg ) {

 $("#changed_notification_value").text( msg );
 var n_url = $('a', this).attr('href');
 window.location.href = n_url;

 });
});
</script>

通知数量更改成功，但尝试重定向时，n_url 的值显示未定义。

【问题讨论】：

你试过jQuery选择器是正确的吗？
@Anzeo the value of n_url shows undefined
@zzlalani 我知道，我在问$('a', this) 是否返回任何东西

标签： php jquery url redirect undefined

【解决方案1】：

试试这个

var n_url = $(this).find('a').attr('href');

【讨论】：

$('a', this) 没有任何问题。这只是.find()的简写

【解决方案2】：

试试这个：

   var n_url = $(this).find("a").attr('href');
     window.location.href = n_url;

【讨论】：

【解决方案3】：

我认为您在使用this 时存在范围问题。你可以做这样的事情来解决这个问题。在发出 ajax 请求之前获取n_url。

$('p').click(function (event) {
    event.preventDefault();
    var n_url = $('a', this).attr('href');

    $.ajax({
        type: "POST",
        url: "http://www.example.com/change_notification.php"
    }).done(function (msg) {

        $("#changed_notification_value").text(msg);
        window.location.href = n_url;
    });
});

【讨论】：

抱歉 :-)

【解决方案4】：

this 不像其他语言那样工作。当不在函数内部时（想想全局空间）this 指的是当前浏览器的Window 对象。默认情况下，新函数被创建为Window 的子函数。

例如；

function foo() {
    return this;
}

实际上与Window.foo = function() { return this; } 相同（除非浏览器处于严格模式）。

因此，当您致电foo() 时，以下情况为真。

foo() === window;   // True, because foo() returns this which is window.

因为默认情况下this 指的是函数绑定到的对象。您可以通过将函数绑定到不同的对象来更改this 的默认值。

var o = {
    x: 99,
    foo: function() {
        return this.x;
    }
};

console.log(o.foo());   // will output 99

将函数绑定到对象时无关紧要。如本例所示。

var a = {
    x: 99
};

var b = {
    x: 77
};

function foo() {
    return this.x;
}

a.f = foo;
b.f = foo;

console.log(a.f());   // will output 99
console.log(b.f());   // will output 77

在上面的示例中，函数 foo 是相同的，但 this 会根据用于调用它的绑定对象引用而变化。

那么 DOM 事件是怎么回事？

函数绑定到 DOM 元素，这是一个 Javascript 对象。所以this指的是触发事件的对象。 Even 如果同一个函数绑定到多个元素。 this 总是指触发函数的那个。

现在返回您的源代码和问题。您在 .done(function(msg){....}) 函数中使用 this。 jQuery 已将 ajax 对象绑定到函数，以便 this 引用该对象。

您也可以使用bind() 函数更改this 所指的内容。 bind 允许您更改绑定到函数的对象，以便 this 引用该对象。

$('p').click(function(event){
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "http://www.example.com/change_notification.php"
    }).done(function( msg ) {
        $("#changed_notification_value").text( msg );
        var n_url = $('a', this).attr('href');
        window.location.href = n_url;
    }.bind(this));
});

上面，我没有更改您的源代码，只是在您的function(msg){...}.bind(this) 末尾添加了.bind(this)。对象this 在函数外部引用的是触发事件的DOM 元素，通过将其绑定到done 的回调函数，您的源代码现在应该可以工作了。

【讨论】：