jQuery & Objects، تحاول إنشاء عنصر واجهة مستخدم خفيف الوزن

Question

أحاول إنشاء "عنصر تحكم" تحديد عام يمكنني إضافة عناصر إليه ديناميكيًا، لكني أواجه مشكلة في جعل الوظائف تعمل بشكل صحيح.

هذا ما بدأت به.

$select = $("<select></select>");
$select.addOption = function(value,text){
  $(this).append($("<option></option>").val(value).text(text));
};

كان هذا جيدًا بمفرده ولكن في أي وقت $select يكون .clone(true)'إد addOption() تم فقدان الوظيفة.

هذا هو أسلوبي الكائني ولكن الوظيفة لا تزال لا تعمل.

function $selectX() {
  return $("<select></select>");
}

$selectX.prototype.addOption() = function(value,text){
  $(this).append($("<option></option>").val(value).text(text));
};

حل الاختراق هو إضافة الوظيفة يدويًا بعد الإنشاء:

$nameSelect= new $selectX;
$nameSelect.addOption = function(value,text){
  $(this).append($("<option></option>").val(value).text(text));
};

هل أنبح الشجرة الخطأ؟

Answer 1

لإضافة طريقة جديدة إلى jQuery تحتاج إلى استخدامها jQuery.fn.methodName الخاصية، لذلك في هذه الحالة سيكون:

jQuery.fn.addOption = function (value, text) {
    jQuery(this).append(jQuery('<option></option>').val(value).text(text));
};

لكن ضع في اعتبارك أن هذا addOption سوف تكون متاحة من نتيجة أي $() يتصل.