Question

我想有一个函数可以返回一个或多个连接到元素的变量，例如返回指定边框或边框的颜色（会使用jQuery）：

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

等等。

以下是示例：http://jsfiddle.net/DkGpP/

问题1：我应该如何构建脚本的一部分（实际上是if / else）只返回我想要的内容（实际上是 $（'element'）。borderColor（'left '，'right'）; 仍然只显示“红色”）？

问题2：我的函数中的参数可以不带撇号调用：

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

如果是，如何重建它（实际显示“未定义”）。是否需要构建如下函数：

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

我很感激你的帮助。

Answer 1

我会用这样的东西。

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

对象将是数组。

Answer 2

您不需要if-else结构。

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 3

当我必须处理多个参数时，我通常更喜欢采用“选项”方式，这意味着参数是一个定义了各种属性的js对象。

在你的例子中，我会写这样的测试：

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;

并调用这样的函数：

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

正如您所看到的，我正在传递一个对象，仅定义了左侧和右侧属性。我将它们设置为true，但是任何评估为“真实”值的东西都可以。

小提琴：http://jsfiddle.net/DkGpP/2/

使用多个参数创建JS函数

3 个答案: