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'正在向控制台打印'Here'，但图像没有出现。图像位于正确的地址。我认为我使用'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引用要为其调用处理程序的元素;也就是<a>标记。你拥有它的方式（使用“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来连接click事件要好得多，然后它会适当地设置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));
});

Javascript的'this'关键字问题

7 个答案: