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，道歉。我已经分道扬琴并添加了一些应该有用的新代码。您需要在新的setValue方法中复制onclick代码。我改变了上面的内容以匹配后代的小提琴中的代码。 The fiddle

OOP - 访问一个对象来改变它的变量？

1 个答案: