如何使用jquery从标签获取完整的URL

I have a notification div. When someone clicks one of the links, the number of notification will be changed and after that the user will be redirected to the link that he clicked. Here is the php script inside the div.

我有一个通知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>";
 }
?>

I am using the following Jquery inside the div:

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

Number of the notification changes successfully but when trying to redirect, the value of n_url shows undefined.

通知编号成功更改但在尝试重定向时，n_url的值显示为undefined。

4 个解决方案

#1

I think you have a problem of scope when using this. You can do something like this to fix the problem. Get the n_url before making the ajax request.

我认为你在使用它时有一个范围问题。你可以做这样的事情来解决问题。在发出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;
    });
});

#2

try this

尝试这个

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

#3

Try this:

尝试这个：

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

#4

this does not work like it does in other languages. When not inside a function (think global space) this refers to the Window object of the current browser. By default, new functions are created as children of Window.

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

For example;

例如;

function foo() {
    return this;
}

Is actually the same as Window.foo = function() { return this; } (unless browser is in strict mode).

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

So when you call foo() the following is true.

因此，当您调用foo（）时，以下情况属实。

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

Since by default this refers to the object the function is bound to. You can change the default value of this by binding the function to a different object.

因为默认情况下，这指的是函数绑定的对象。您可以通过将函数绑定到其他对象来更改此默认值。

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

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

It doesn't matter when you bind the function to an object. As in this example.

将函数绑定到对象时无关紧要。如在这个例子中。

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

In the above example the function foo is the same, but this changes depending on which bound object reference was used to call it.

在上面的例子中，函数foo是相同的，但是这取决于使用哪个绑定对象引用来调用它。

So what is going on with DOM events?

那么DOM事件发生了什么？

The function is bound to the DOM element, and that's a Javascript object. So this refers to the object that triggers the event. Even if the same function is bound to multiple elements. this always refers to the one that triggered the function.

该函数绑定到DOM元素，这是一个Javascript对象。所以这指的是触发事件的对象。即使相同的函数绑定到多个元素。这总是指触发该功能的那个。

So now back your source code and problem. Your using this inside the .done(function(msg){....}) function. jQuery has bound the ajax object to the function so that this refers to that object.

所以现在回来你的源代码和问题。你在.done（函数（msg）{....}）函数中使用它。 jQuery已将ajax对象绑定到函数，以便它引用该对象。

You can change what this refers too by using the bind() function. bind lets you change what object is bound to the function so that this refers to that object instead.

您可以使用bind（）函数更改它所指的内容。 bind允许您更改绑定到函数的对象，以便它引用该对象。

$('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));
});

Above, I didn't change your source code but just added .bind(this) to the end of your function(msg){...}.bind(this). The object this refers to outside the function is the DOM element that triggered the event, and by binding it to your callback function for done your source code should now work.

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

#1