如何在Javascript上添加值？

Question

I'm a very beginner on this and wondering is there anyway that I can add these two values

maxScreenWidth: 480,
menuTitle: 'Menu:'

into this script.

function DropDown(el) {
    this.mainNav = el;
    this.initEvents();
}
DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        obj.mainNav.on('click', function (event) {
            $(this).toggleClass('active');
            event.stopPropagation();
        });
    }
}

$(function () {

    var mainNav = new DropDown($('#mainNav'));

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

});

thanks in advance.

• In addition, this is the dropdown menu that I'm applying to my website.

http://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html

I'm trying to apply this menu only for phone layout but it maintains its form no matter what screen size is. It is supposed be disappeared when it's more 480px but it isn't.

Thank you so much for your help.

Answer 1

If you want to add those properties, just add them like below:

function DropDown(el, width, title) {
    this.mainNav = el;
    this.maxScreenWidth = width; //added
    this.menuTitle = title; //added
    this.initEvents();
}

Now they are part of your constructor as passable arguments

Then when you call you constructor, just pass what those values should be

$(function () {
    var mainNav = new DropDown($('#mainNav'), 480, 'Menu'); //See, pass them here.

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

});

Answer 2

You can add this values as DropDown parameters as Christoper wrote, also you can create global variables:

var maxScreenWidth = 480;
var menuTitle = 'Menu:';
function DropDown(el) {
    this.mainNav = el;
    this.initEvents();
}
//...

But then, if you write it in your js file, other code could access and change your global variables (they are global after all :) ), so this technique exists:

(function ($) {
    var maxScreenWidth = 480;
    var menuTitle = 'Menu:';
    function DropDown(el) {
        this.mainNav = el;
        this.initEvents();
    }
    //...
}(jQuery));

In the last example you'r creating function with 'private scope', so your 'private' variables ain't accessible from other js code. Also you should note that you couldn't access DropDown from other code in you application, only within this function.