Javascript 的“this”问题关键词

Question

我有以下 HTML 标记：

<a class="link1" href="javascript:load(0,1);">Click here</a><span class="loader"></span>

加载函数定义如下：

function load(flag,id){

    /*Load Forum*/
    if(flag==0){
        $(this).next("span.loader").html("<img src='./images/loader.gif'/>");
    console.log("Here");
    //....Some code follows

所以我想要的是预加载器 gif 应在单击链接时出现在链接旁边。 “console.log”正在将“此处”打印到控制台，但图像没有出现。该图像位于正确的地址。我认为我使用“this”关键字的方式有问题。任何帮助将不胜感激。谢谢。 :)

更新：正如一些人指出的那样，我通过将 this 作为参数传递来传递对该元素的引用。现在这是我的代码，但它仍然无法工作：

<a class="link1" href="javascript:load(0,1,this);">Click here</a><span class="loader"></span>


function load(flag,id,ref){
/*Load Forum*/
if(flag==0){
    if(ref){ $(ref).next("span.loader").html("123");console.log("Here"); }

Answer 1

如果您使用 jQuery 绑定事件处理程序而不是使用“href”（无论如何这都是一个非常坏的习惯），那么您的 this 值将是正确的。

$(function() {
  $('a.link1').click(function(e) {
    e.preventDefault();
    if ($(this).data('flag') === '0') {
      $(this).next('span.loader').html('<img/>', { src: './images/loader.gif' });
      // ...
    }
  });
});

这也意味着标记将会改变：

<a class='link1' href='#' data-flag='0'>Click here</a>

通过 jQuery 绑定处理程序意味着库将确保 this 引用正在为其调用处理程序的元素；即 标记。按照您的方式（使用“href”伪 URL），情况并非如此。

Answer 2

你的问题的答案是使用 javascript:load.call(this, 0, 1) 但 Pointy 是对的。

Answer 3

上下文是 window 因为您使用 javascript: 伪协议引用它。我会不引人注目地附上它。

<a id="link" href="#">jkfds</a>
<script>
   (function(){
        var l = document.getElementById('link');
        l.onclick = function() {
           load.call( this, 0, 1 );
           return false; // if needed
        };
        function load(one,two){ alert(one); alert(two); alert(this.nodeName); }
   })();
</script>

上下文默认为锚点，因为我们不在全局上下文中执行它，因为匿名函数附加到 DOMElement （锚点节点）并且上下文通过 .call 传递。

如果您需要 DOM 元素本身的参数，只需使用 data- 属性并使用 .getAttribute 引用它们（假设它在 IE6 中一致工作）

Answer 4

尝试：

<a class="link1" href="#" flag="0">Click here</a><span class="loader"></span>

和

$("a.link1").click(function() {
    if($(this).attr("flag") ==0){
        $(this).next("span.loader").html("<img src='./images/loader.gif'/>");
        console.log("Here");
    }
})

Answer 5

未经测试的

<a class="link1">Click here</a><span class="loader"></span>

    $('.link1').click(function() {
        load(flag, id);
    }

    function load(flag,id){

        /*Load Forum*/
        if(flag==0){
            $(this).next("span.loader").html("<img src='./images/loader.gif'/>");
        console.log("Here");
        //....Some code follows
    }

Answer 6

Pointy 是对的，有更好的方法可以做到这一点，但如果您无法重构，您可以将 this 作为 javascript 调用的另一个参数传递...

Answer 7

这是一个工作示例，假设您在多个位置使用 load(flag, id) 函数：http://jsfiddle.net/jfriend00/GRcXS/。主要问题是“this”的值是浏览器窗口，而不是使用 javascript: 分配事件处理程序时的元素。既然你有 jQuery，最好使用 jQuery 来连接点击事件，然后它会适当地设置 this 点。

HTML：

<a class="link1" data-flag="0" href="#">Click here</a>
<span class="loader"></span>

JavaScript：

function load(flag,id){
    /*Load Forum*/
    if(flag == 0) {
        $(this).next("span.loader").html("<img src='http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg'/>");
        console.log("Here");
        //....Some code follows
    }
    return(false);
}

$(".link1").click(function() {
    return(load.call(this, $(this).data("flag"), 1));
});