javascript - jQuery 风格的 getter 和 setter

Question

我有一个构造函数 Dropdown 它将采用数组作为参数。该参数将由附加到原型(prototype)的方法使用。该参数是一个数组，应将其转换为 jQuery option 对象的参数，该对象应为 select 元素的下拉菜单选项。目前我有:

function Dropdown(data) {
    this.sel = $('<select>');
}

Dropdown.prototype.options = function (options) {
    var self = this; //using $(this) doesn't work either

    if ( !options ) {
        //if null return the current values of
        return self.sel.html();

    } else {
         //make a jQuery option object out of every item in the array
         //set the sel property's html to that
         self.sel.html = ($.map(options, function (val) {
             return $('<option>').text(val).val(val);
         }));
    }
}

var testArray = ['one', 'two', 'three'];
var dropdown = new Dropdown(testArray);
dropdown.sel.appendTo($('body'));
console.log(dropdown.options()); //nothing outputted to the console

通过将 testArray 传递到 Dropdown 构造函数，这应该设置 sel 的 html 属性，但事实并非如此，并且尝试使用 jQuery 样式 getter 不会在控制台上打印任何内容。下拉列表附加到页面，只是没有选项。

Answer 1

首先，您没有调用原型(prototype)中的选项函数。调用之后，又出现了一些其他的bug。

self.sel.html = ($.map(options, function (val) {
     return $('<option>').text(val).val(val);
}));

这会将 self.sel.html 转换为一个充满 jQuery 选项元素的数组，而您对此不执行任何操作。

我对其进行了一些更改以使其正常工作。看看它是否适合你。我相信这很容易理解。

function Dropdown(data) {
    this.sel = $('<select>');
    this.options(data);
}

Dropdown.prototype.options = function (options) {
    var sel = this.sel;

    options && options.forEach(function ( val ) {
        $('<option>').val(val).text(val).appendTo(sel);
    });
}

fiddle :http://jsfiddle.net/b7pvS/