creating JS function with multiple arguments

Question

I'd like to have a function which would return one or more variables connected to element, for example return color of specified border or borders (would use jQuery to it):

$('element').borderColor(); // should return "red, blue, green, orange"
$('element').borderColor('left'); // should return "red"
$('element').borderColor('left', 'right'); // should return "red, green"

and so on.

Here's example: http://jsfiddle.net/DkGpP/

Question 1: How should I construct part of script (which is actually if/else) to return only what I want (actually $('element').borderColor('left', 'right'); still showing only "red")?

Question 2: Can arguments in my function can be called without apostrophes like:

$('element').borderColor(left);
$('element').borderColor(left, right);

if yes, how to rebuild it (actually show "undefined"). Does it demand to build a function like:

jQuery.fn.borderColor = function(left, top, right, bottom) {

?

I'll be grateful for help.

Answer 1

You don't need an if-else structure.

jQuery.fn.borderColor = function() {    
    var tag = $(this).eq(0), ret = [];
    var arr = arguments.length > 0 ? arguments : ["left","top","right","bottom"];
    for (var i = 0; i < arr.length; i++) {
        ret.push(tag.css("border-" + arr[i] + "-color"));
    }
    return ret.join(","); // remove .join(",") to get a useful array
};

var myborder = $('#tester').borderColor('left', 'right');
$('#result').text(myborder);

Demo

Answer 2

I would use something like this.

function borderColor(object){
    for(var ele in object){
       if(ele=="left"){
       }else if()....
    }
}

object will be array.

Answer 3

When I have to deal with multiple parameters, I usually prefer to go the "options" way, meaning that the argument is a js object with various property defined.

In your example, I would write the test like this:

if (border == null) // or undefined, add a test here
    return [borderLeft, borderTop, borderRight, borderBottom];

// skip the else
result = [];
if (border.left)
    result.push(borderLeft);
if (border.right)
    result.push(borderRight);
// etc. etc.
return result;

And call the function like this:

var myborder = $('#tester').borderColor({ left: true, right: true });

As you can see I am passing an object, having defined only the left and right properties. I set them to true, but anything that evaluates to a "truthy" value will do.

The fiddle: http://jsfiddle.net/DkGpP/2/