在jquery函數參數中使用'this'

Question

我在這裏的第一個問題...我已經搜索了其他Q & A，但找不到我正在尋找的點。

我是jquery begginer，所以，當然，這使我更難以適應我的問題的解決方案。

所以...我有以下代碼：

(function($){ 
$('select[data-select="cidades-distinct"]').ajaxSelect('http://www.myurl.asp', #destination); 
})(jQuery); 

我用它來填補，阿賈克斯，形式與城市名稱選擇，基於該國的狀況選擇。所以...要知道哪個是保存狀態選項的select，我使用數據屬性data-select。城市列表以#destination ID返回。 HTML代碼是：

<select data-select="cidades-distinct" id="myid" name="myname"> 

它完美地工作。但是...如果我想使用多個州/城市列表，我不能使用此函數，因爲它將列表返回到相同的ID＃目標。

所以，我想要做的就是通過數據屬性，如data-destination =「＃destination」，從窗體中傳遞我的id目標名稱。所以，我的HTML代碼如下：

<select data-select="cidades-distinct" data-destination="#cidade" id="myid" name="myname"> 

但我不能這樣做！我嘗試了下面的代碼以及一些變體，但是有一些錯誤！

(function($){ 
$('select[data-select="cidades-distinct"]').ajaxSelect('http://www.myurl.asp', $(this).attr("data-destination")); 
})(jQuery); 

你能幫我嗎？

編輯：添加ajaxSelect功能 這是ajaxSelect：

jQuery.noConflict(); 
(function($){ 
$.fn.extend({ 
    ajaxSelect: function(url, destino){ 
     return this.change(function(){ 
      var t = $(this), 
       valor = t.val(); 

      $.ajax({ 
       'url': url, 
       'data': {'valor': valor, 'action':'ajaxSelect'}, 
       'type': 'GET', 
       'success': function(response){ 
        $(destino).html(response) 
        $(destino).trigger("chosen:updated"); 
       }, 
       'error': function (error){ 
        console.log(error); 
        loading.hide(); 
        alert('Error!'); 
       } 
      }); 
     }); 
    } 
}); 

}）（jQuery的）;

Answer 1

「this」關鍵字 在JavaScript中，與大多數面向對象的編程語言一樣，這是一個特殊的關鍵字，它在方法中用來引用調用方法的對象。

• 如果函數是使用Function.call（）或Function.apply（）調用，這將被設置爲傳遞給.CALL的第一個參數（：使用簡單一系列步驟來確定這個值）/。應用（）。如果傳遞給.call（）/。apply（）的第一個參數爲null或未定義，則將引用全局對象（這是Web瀏覽器中的窗口對象）。
• 如果被調用的函數是使用Function.bind（）創建的，那麼這將是在函數創建時傳遞給.bind（）的第一個參數。
• 如果函數作爲對象的方法被調用，則會引用該對象。
• 否則，函數將作爲一個獨立的函數被調用，而不會附加到任何對象，並且這將引用全局對象。

// A function invoked using Function.call() 

var myObject = { 
    sayHello: function() { 
     console.log("Hi! My name is " + this.myName); 
    }, 
    myName: "Rebecca" 
}; 

var secondObject = { 
    myName: "Colin" 
}; 

myObject.sayHello();     // "Hi! My name is Rebecca" 
myObject.sayHello.call(secondObject); // "Hi! My name is Colin" 

---

// A function created using Function.bind() 

var myName = "the global object"; 
var sayHello = function() { 
    console.log("Hi! My name is " + this.myName); 
}; 
var myObject = { 
    myName: "Rebecca" 
}; 
var myObjectHello = sayHello.bind(myObject); 

sayHello();  // "Hi! My name is the global object" 
myObjectHello(); // "Hi! My name is Rebecca" 

---

// A function being attached to an object at runtime. 

var myName = "the global object"; 
var sayHello = function() { 
    console.log("Hi! My name is " + this.myName); 
}; 
var myObject = { 
    myName: "Rebecca" 
}; 
var secondObject = { 
    myName: "Colin" 
}; 

myObject.sayHello = sayHello; 
secondObject.sayHello = sayHello; 

sayHello();    // "Hi! My name is the global object" 
myObject.sayHello();  // "Hi! My name is Rebecca" 
secondObject.sayHello(); // "Hi! My name is Colin" 

當調用內的長名字空間深深的功能，它往往是很有誘惑力的減少的代碼，你需要輸入量通過將對實際函數的引用存儲爲單個較短的變量。不要使用實例方法執行此操作很重要，因爲這會導致函數內的值發生更改，導致代碼操作不正確。例如：

var myNamespace = { 
    myObject: { 
     sayHello: function() { 
      console.log("Hi! My name is " + this.myName); 
     }, 
     myName: "Rebecca" 
    } 
}; 

var hello = myNamespace.myObject.sayHello; 

hello（）; //「嗨！我的名字是未定義」 你可以，但是，安全地減少一切都交給其上調用方法的對象：

var myNamespace = { 
    myObject: { 
     sayHello: function() { 
      console.log("Hi! My name is " + this.myName); 
     }, 
     myName: "Rebecca" 
    } 
}; 

var obj = myNamespace.myObject; 

obj.sayHello(); // "Hi! My name is Rebecca" 

source