使這個$（這個）工作

好吧我有一個非常基本的功能，它移動一個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'，我可以重複使用代碼，對吧？任何人都可以幫我做這個工作嗎？

來源

2010-09-13 Luke

在任何給定函數中都不能使用$(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)); } 
});

來源

2010-09-13 13:29:23 meagar

在我看來，如果你要編寫一個以jQuery對象作爲參數的函數，那麼你不妨將這個函數寫成一個jQuery插件。 – Pointy 2010-09-13 14:10:44

this在你的第二個背景不同的範圍。 this在你的第二個方面是指function不#sheen

你可以做的就是定義this在函數外有不同的含義。

var self = this; 

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

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

來源

2010-09-13 13:30:20

你的想法是正確的，但不確定自我是否應該在全球範圍內申報。它將始終返回文檔對象。 – 2010-09-13 13:32:47

你是對的。我假設這些函數坐在json類中。如果不是，你是正確的，它會返回可能是他正在尋找的文件。 – 2010-09-13 13:38:42

讓它成爲jQuery插件吧？

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

（與其他同一個）

然後，你剛纔說

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

，或者如果你是在一個事件處理程序：

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

來源

2010-09-13 13:30:39 Pointy

的「的含義這個「隨着你調用你的函數的方式而改變。如果你從document.ready函數調用這些函數，它會給你一個文檔對象。如果你從另一個對象中調用它，它會給你這個對象的實例。

讀一下關於執行上下文在jQuery/JavaScript中。試試這個：http://www.webreference.com/programming/javascript/object-oriented_javascript3/

我建議你清理一下，不要尋找快捷方式，因爲這是JavaScript/jQuery中的一個關鍵概念。所以，不要在這個問題上尋找快速解決方案，而是試着瞭解你想要做什麼以及發生了什麼。

來源

2010-09-13 13:31:21

使這個$（這個）工作

回答

相關問題