OOP - Access an object to change it's variable?

I came across a script that's really cool but I have limited knowledge in OOP implementation. Would need help to access the value to reset it.

It's actually a 'styled dropdown box'. After you make a selection, the text appears in the box. And after clicking Reset, the text should go back to the default.

I need to know how to access the instance to modify the value!

Please see my JSFiddle: http://jsfiddle.net/bzyf5Lp2/

Any help would be appreciated.

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");
});

As you can see, I am using a jquery text change, which seems to destroy the entire instance altogether.

Since the instance was created with

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

I also tried the undermentioned but with no luck.

 filter1.val = 'Materials'; 

Any help would be appreciated!

Answers


if you add setValue as shown in the following code (I left the DropDownFilter declaration so this can be run as a whole):

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);
    },
}       

EDIT: I missed your JS fiddel before, my apologies. I have forked the fiddle and added some new code that should work. You needed to duplicate the onclick code in the new setValue method. I changed the above to match the code in the fiddle for posterity. The fiddle


Need Your Help

GoogleApiClient onConnectionSuspended , should i call mGoogleApiClient.connect() again?

android google-play-services google-api-client

I am using GoogleApiClient in a service to request fused location updates. Every thing is working correctly, but sometimes the connection is suspended and onConnectionSuspended is called.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.