Question

好的，我有一个非常基本的功能，可以移动div的背景位置，使其具有“光泽”效果，第二个功能可以将其移回。

如果我通过其ID获得div工作正常。但是当我试图通过使用'this'来使函数更加通用时 - 它会中断。

这很好用：

function runsheen() {
$('#sheen').animate({backgroundPosition: '-400px 0px'},1000);
}

function resetsheen() {
$('#sheen').css({backgroundPosition: '-0px 0px'});
}

但这没有任何作用

function runsheen() {
$(this).animate({backgroundPosition: '-400px 0px'},1000);}

function resetsheen() {
$(this).css({backgroundPosition: '-0px 0px'});}

使用ID版本运行它意味着每个按钮的新功能 - 垃圾。如果我使用'this'，我可以反复重复使用代码，对吧？任何人都可以帮我做这个工作吗？

Answer 1

您不能在任何给定函数中使用$(this)，this是对调用该函数的对象的引用。

更简单的方法（假设您在悬停时执行此操作）是将函数直接传递给.hover事件：

$('div').hover(
  function () {
    $(this).animate({backgroundPosition: '-400px 0px'},1000);
  }, 
  function () {
    $(this).css({backgroundPosition: '-0px 0px'});
  }
);

或者，修改您的函数以获取参数并传入div以将效果应用于：

function runsheen($div) {
  $div.animate({backgroundPosition: '-400px 0px'},1000);
}

function resetsheen($div) {
  $div.css({backgroundPosition: '-0px 0px'});
}

$('div').hover(
   function () { runsheen($(this)); },
   function () { resetsheen($(this)); }
});

Answer 2

this在您的第二个上下文中具有不同的范围。第二个上下文中的this指的是function而不是#sheen

您可以做的是将this定义为函数外的其他含义。

var self = this;

function runsheen() {
$(self).animate({backgroundPosition: '-400px 0px'},1000);}

function resetsheen() {
$(self).css({backgroundPosition: '-0px 0px'});}

Answer 3

可能是一个jQuery插件吗？

$.fn.runsheen = function() {
  this.animate({backgroundPosition: '-400px 0px'}, 1000);
  return this;
});

（与另一个相同）

然后你就说

$('#sheen').runsheen();

或者如果您在事件处理程序中：

$('#whatever').click(function() {
  $(this).runsheen();
});

Answer 4

“this”的含义随着你调用你的函数而改变。如果从document.ready函数调用这些函数，它将为您提供一个文档对象。如果你从另一个对象中调用它，它将为你提供该对象的实例。

在jQuery / JavaScript中阅读一些关于执行上下文的内容。试试这个：http://www.webreference.com/programming/javascript/object-oriented_javascript3/

我建议你清理一下，不要寻找快捷方式，因为这是JavaScript / jQuery中的一个关键概念。所以不要寻找快速解决方案一个，但试着了解你想做什么和发生了什么。

使这个$（这个）工作

4 个答案: