javascript - 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 绑定(bind)您的事件处理程序而不是使用“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 绑定(bind)处理程序意味着库将确保 this引用为其调用处理程序的元素；即 <a>标签。按照您的方式(使用“href”伪 URL)，情况并非如此。