JQuery $this 选择器 - 如何使其工作

Posted 2023-05-09

【中文标题】JQuery $this 选择器 - 如何使其工作

【英文标题】：JQuery $this selector - how to make it work

【发布时间】：2011-07-19 23:45:31

【问题描述】：

我在使用 JQuery 的 $this 选择器时遇到问题。这是无所作为。脚本的基本核心并没有失败。

$(this).css("background-image", 
"url(http://www.divethegap.com/update/z-images/diving-trips/tabs/bases-z.png)");

任何想法为什么它不起作用？我用class也试过同样的效果。

完整代码（根据要求） http://jsfiddle.net/mcxez/1/:

标记：

<a href="?accommodation" style="background-position:-15px top;" 
   onclick="inload('?accommodation'); return false">Accommodation</a>

<a href="?travel" style="background-position:-15px top;" 
   onclick="inload('?travel'); return false">Travel</a>

js:

function inload(thelink) 
    $('.TABbase').click(function()
        $(this).css("background-image", 
            "url(http://www.divethegap.com/update/z-images/diving-trips/tabs/bases-z.png)"); 
    );

  return false;

【问题讨论】：

"$(this)" 所指的内容取决于代码的上下文。上面的代码之前是什么？

More about this at MDC

JS 小提琴jsfiddle.net/mcxez/1

【参考方案1】：

在 jQuery 中，this 通常是对函数中某些内容的引用……比如……

HTML

<button id="button1">1</button>
<button id="button2">2</button>

JS

$('button').click(function()
    alert( $(this).attr('id') ); //either 'button1' or 'button2'

在这种情况下，this 指的是被点击的按钮。

也许您可以分享更多代码来说明您要完成的工作。

【参考方案2】：

这是修改后的 html

<a href="?accommodation" style="background-position:-15px top;" data-href="?accomodation" class="my_class">Accommodation</a>
<a class="my_class" href="?travel" style="background-position:-15px top;" data-href="?travel" >Travel</a>

这里是javascript

$(document).ready(function()
  $(".my_class").click(function()
    $(this).css("background-image", "url(http://www.divethegap.com/update/z-images/diving-trips/tabs/bases-z.png)");
    return false;
  );
);

【参考方案3】：

你从哪里打电话给this？ this 是一个特殊变量，它引用当前在适用于它的方法中引用的对象。如果您从方法外部引用 this，它指的是 dom 窗口。例如：

<script type='text/javascript'>
alert($(this)); // refers to window

$('body').bind('click', function() 
    alert($(this)); // refers to the jQuery object created by selecting the body element.
);
</script>

【参考方案4】：

要使 $(this) 起作用（或 this），它必须与元素相关。例如：

<a href="#" onclick="alert($(this).html());return false">test</a>

或者，在选择器循环内：

$('.someClass').each(function() 
   $(this).css('background-color','#333');
);