我正在努力学习制作jQuery插件,并制作了以下插件,请原谅我的代码墙:
$.fn.addressForm = function () {
return this.each(function () {
var elem = $(this);
$.each(elem.find(".addr-country select"), function ( elem ) {
$(this).on('change', function (elem ) {
// var elem = $(this).parents(".form-address");
if ($(this).val() === "US") {
elem.find(".addr-state label").html("State"); // eror gets thrown about this line
elem.find(".addr-postal-code label").html("Zip");
elem.find(".addr-street-1").show();
elem.find(".addr-street-2").show();
elem.find(".addr-city").show();
elem.find(".addr-state").show();
elem.find(".addr-postal-code").show();
var states = [
{ text: "AL", value: "AL" },
{ text: "AK", value: "AK" },
{ text: "AZ", value: "AZ" },
{ text: "AR", value: "AR" },
{ text: "CA", value: "CA" },
{ text: "CO", value: "CO" },
{ text: "CT", value: "CT" },
{ text: "DE", value: "DE" },
{ text: "FL", value: "FL" },
{ text: "GA", value: "GA" },
{ text: "HI", value: "HI" },
{ text: "ID", value: "ID" },
{ text: "IL", value: "IL" },
{ text: "IN", value: "IN" },
{ text: "IA", value: "IA" },
{ text: "KS", value: "KS" },
{ text: "KY", value: "KY" },
{ text: "LA", value: "LA" },
{ text: "ME", value: "ME" },
{ text: "MD", value: "MD" },
{ text: "MA", value: "MA" },
{ text: "MI", value: "MI" },
{ text: "MN", value: "MN" },
{ text: "MS", value: "MS" },
{ text: "MO", value: "MO" },
{ text: "MT", value: "MT" },
{ text: "NE", value: "NE" },
{ text: "NV", value: "NV" },
{ text: "NH", value: "NH" },
{ text: "NJ", value: "NJ" },
{ text: "NM", value: "NM" },
{ text: "NY", value: "NY" },
{ text: "NC", value: "NC" },
{ text: "ND", value: "ND" },
{ text: "OH", value: "OH" },
{ text: "OK", value: "OK" },
{ text: "OR", value: "OR" },
{ text: "PA", value: "PA" },
{ text: "RI", value: "RI" },
{ text: "SC", value: "SC" },
{ text: "SD", value: "SD" },
{ text: "TN", value: "TN" },
{ text: "TX", value: "TX" },
{ text: "UT", value: "UT" },
{ text: "VT", value: "CT" },
{ text: "VA", value: "VA" },
{ text: "WA", value: "WA" },
{ text: "WV", value: "WV" },
{ text: "WI", value: "WI" },
{ text: "WY", value: "WY" },
{ text: "D.C.", value: "D.C." }
];
elem.find(".addr-state select").empty();
$.each(states, function (index, value) {
var o = new Option(value.text, value.value);
$(o).html(value.text);
elem.find(".addr-state select").append(o);
});
}
if ($(this).val() === "CA") {
// Update labels
elem.find(".addr-state label").html("Province");
elem.find(".addr-postal-code label").html("Postal Code");
// Show fields
elem.find(".addr-street-1").show();
elem.find(".addr-street-2").show();
elem.find(".addr-city").show();
elem.find(".addr-state").show();
elem.find(".addr-postal-code").show();
var states = [
{ text: "AB", value: "AB" },
{ text: "BC", value: "BC" },
{ text: "MB", value: "MB" },
{ text: "NB", value: "NB" },
{ text: "NL", value: "NL" },
{ text: "NS", value: "NS" },
{ text: "ON", value: "ON" },
{ text: "PE", value: "PE" },
{ text: "QC", value: "QC" },
{ text: "SK", value: "SK" },
{ text: "NT", value: "NT" },
{ text: "NU", value: "NU" },
{ text: "YT", value: "YT" }
];
// Reset state options
elem.find(".addr-state select").empty();
$.each(states, function (index, value) {
var o = new Option(value.text, value.value);
$(o).html(value.text);
elem.find(".addr-state select").append(o);
});
}
})
});
})
}
由于某些原因,无法将elem传递给on change函数。如果我要取消注释行var elem = $(this).parents(".form-address");
的注释,它将很好地工作。但是我需要使用原始选定元素的$(this)实例,而不是特定的类。我在做什么错了?