javascript - OOP - 访问对象以更改其变量？

Question

我遇到了一个非常酷的脚本，但我对 OOP 实现的了解有限。需要帮助才能访问该值以重置它。

它实际上是一个“样式化的下拉框”。做出选择后，文本将出现在框中。单击“重置”后，文本应恢复为默认值。

我需要知道如何访问实例来修改值!

请查看我的 JSFiddle:http://jsfiddle.net/bzyf5Lp2/

如有任何帮助，我们将不胜感激。

function DropDownFilter(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}

DropDownFilter.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
        $('.filter-dropdown').removeClass('active');
    },
    getIndex : function() {
        return this.index;
    },
}

$(function() {
    var filter1 = new DropDownFilter( $('#fdd') );

    $(document).click(function() {
        // all dropdowns            
        $('.filter-dropdown').removeClass('active');
    });
});

//RESET FUNCTION
$(".isotope-reset").click(function(){       
    $("#fdd").text("Materials");
});

如您所见，我正在使用 jquery 文本更改，这似乎完全破坏了整个实例。

由于实例是使用

创建的

 var filter1 = new DropDownFilter( $('#fdd') );

我也尝试了下面提到的方法，但没有成功。

 filter1.val = 'Materials'; 

如有任何帮助，我们将不胜感激!

Answer 1

如果您添加 setValue，如以下代码所示(我保留了 DropDownFilter 声明，以便可以作为一个整体运行):

function DropDownFilter(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}

DropDownFilter.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
        $('.filter-dropdown').removeClass('active');
    },
    getIndex : function() {
        return this.index;
    },
    setValue : function(newVal, newIndex) {
        this.val = newVal;
        this.index = newIndex;
        this.placeholder.text(newVal);
    },
}       

<小时/>

编辑:我之前错过了你的 JS fiddel，我很抱歉。我已经 fork 了 fiddle 并添加了一些应该可以工作的新代码。您需要在新的 setValue 方法中复制 onclick 代码。我更改了上面的内容以匹配 fiddle 中的代码以供后代使用。 The fiddle