当没有选择时，$（this）如何工作

Question

我刚刚进入缓存我的jquery对象但不确定在使用（this）时如何正确执行它。

同样我唯一知道如何使用（this）的时候是它在click对象或函数内部的时候如此：

$(".trigger").click(function () {
    if ($(this).hasClass('toggle')) {
        $(this).closest("td").next().find(".clueless > div").slideUp();
        $(this).removeClass('toggle');
    } else {
        $(this).closest("td").next().find(".clueless > div").slideDown();
        $(this).addClass('toggle');
    }
});

所以如果我想缓存$(this).closest("td").next().find(".clueless > div")，我唯一能想到的就是：

var $something = $(".trigger").find(this).closest("td").next().find(".clueless > div");

Answer 1

不确定您正在尝试实现的目标，但只要有上下文，您就可以缓存$(this)。

$(".trigger").click(function () {
    var $trigger = $(this);
    if ($trigger.hasClass('toggle')) {
        $trigger.closest("td").next().find(".clueless > div").slideUp();
        $trigger.removeClass('toggle');
    } else {
        $trigger.closest("td").next().find(".clueless > div").slideDown();
        $trigger.addClass('toggle');
    }
});

Answer 2

如果您想缓存$(this).closest("td").next().find(".clueless > div")，那么

$(".trigger").click(function () {
    var el = $(this).closest("td").next().find(".clueless > div");
    if ($(this).hasClass('toggle')) {
        el.slideUp();
        $(this).removeClass('toggle');
    } else {
        el.slideDown();
        $(this).addClass('toggle');
    }
});

我认为这就是你想要的，因为你多次使用它是有意义的缓存$(this)

var $this = $(this);

会这样做

Answer 3

我不会完全重复this关键字的工作方式，但有详尽的解释here。

在JS中，当默认this行为未被更改时

保持简单，要知道this关键字所引用的对象，您只需在函数调用中查看.的左侧。

例如，在myObj.someFunction()中，this中的someFunction关键字将指向myObj（除非该函数已使用Function.prototype.bind绑定）

如果未在对象（例如someFunction()）上调用该函数，则this将指向浏览器中window的全局对象。

除了addEventListener之外，传递的匿名函数也是这种情况，这将确保处理程序中的this值是处理程序所附加的对象。< / p>

E.g。

setTimeout(function () { this; /*window*/ }, 10);

document.addEventListener('click', function (e) {  
    e.target; //the clicked DOM element
    this; //the document
});

API更改this时

使用Function.prototype.call或Function.prototype.apply，可以指定this在函数执行期间指向的对象。

某些库（例如jQuery）正在利用该功能使this指向更直观的对象，而不是全局对象。

E.g。

$('#someEl').on('click', function (e) {
    this; //the DOM element that was clicked (not the jQuery wrapper)
});

当图书馆以这种方式更改this时，除了查看图书馆的文档外，没有其他方法可以查看this将会是什么。

我们可以从jQuery event docs读到：

  

除了事件对象，事件处理函数也有   访问处理程序通过绑定到的DOM元素   关键字this。

重写您的功能

现在，您可以在这里重新编写您的功能：

$(".trigger").click(function () {
    var $this = $(this).toggleClass('toggle'),
        $elementToSlide = $this.closest("td").next().find(".clueless > div"),
        isToggled =  !$this.hasClass('toggle'),
        slideBehavior = isToggled? 'slideUp' : 'slideDown';

    $elementToSlide[slideBehavior]();
});