Поддержание «это» при вызове функции с JQuery

Question

Я хотел бы перейти от этого:

$("#btnminus").mousedown(function() { 
    $(this).animate({width: "95%", height: "95%"}, 50); 
} 

к этому:

function btnPressed() { 
    $(this).animate({width: "95%", height: "95%"}, 50); 
} 
$("#btnminus").mousedown(function() { 
    btnPressed(); 
} 

Видимо, это не так просто. JSLint дает мне проблему «строгого нарушения», о которой я не знаю, что означает.

Answer 1

Это даже проще, просто ссылаться на функции, а this-value будет элемент

$("#btnminus").mousedown(btnPressed); 

При вызове функции внутри другой анонимной функции, без контекста, то this-value будет window(в небрежном mode, в строгом это будет undefined), а не элемент, потому что это контекст исполнения по умолчанию, когда ничего не указано.

Здесь some examples о том, как установить this-value при вызове функции внутри дескриптора события.

Как JSLint имеет огромное количество глупости встраиваемый, и Линц всякие вещи, которые не neccessarely проблема, вы можете либо

1. прекратить использование его
2. Игнорировать ошибку, так как это причина по this в функции, которая JSLint не знает, что такое
3. добавить this: true директиву в файл, чтобы сделать JSLint игнорировать такие ошибки

-

/*jslint this: true*/ 

"use strict" 

function btnPressed() { 
    $(this).animate({width: "95%", height: "95%"}, 50); 
} 

$("#btnminus").mousedown(btnPressed); 

проверит

Answer 2

JSLint дает мне 'строгое нарушение' проблема, которую я не знаю, что значит.

Это означает, что вы используете режим strict, и эта ошибка говорит вам, что здесь

function btnPressed() { 
    $(this).animate({width: "95%", height: "95%"}, 50); 
} 

Вы используете this в контексте автономной функции, которая не является #btnminus элемента.

В этом коде

$("#btnminus").mousedown(function() { 
    btnPressed(); 
} 

this внутри анонимной функции является правильным, потому что JQuery управляет, что для вас, но когда вы звоните btnPressed() ИТС this это не правильным.

Вы можете просто сделать $("#btnminus").mousedown(btnPressed);, и все будет в порядке.

Answer 3

Использование события.currentTarget вместо этого:

function btnPressed(event) { 
 
    var $el = $(event.target); 
 
    $(this).animate({width: "95%", height: "95%"}, 50); 
 
} 
 

 
$("#btnminus").mousedown(btnPressed);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnminus">Minus</button>