怎么简易地写这个js呢？

Question

var posLorR //可能等于 'left'或'right'
var posTorB //可能等于 'top' 或'bottom'

Style(posLorR,posTorB); //调用

function Style(posLorR,posTorB ){ // 参数为要改变按钮$btn的样式属性
    var left = 1px;
    var top = 2px;
    var right = 3px;
    var bottom = 4px;
    //如何 根据 posLorR 和 posTorB 动态给 $btn.css赋值上面给定的四个值?
    //结果形如 $btn.css({ right:right,bottom:bottom}); 
}

Answer 1

function Style(posLorR, posTorB) {
    var json = {};
    posLorR == 'left' ? json.left = '1px' : josn.right = '2px';
    posTorB == 'top' ? json.top = '3px' : josn.bottom = '4px';
    // $btn.css(json);
    
}

Style('left', 'top');

Answer 2

谢邀，虽然来晚了，但是我觉得还是可以补充一下

function Style(posLorR, posTorB) { // 参数为要改变按钮$btn的样式属性
    // 定义成一个对象，换句话说，定义成字典
    var defined = {
        left: "1px",
        top: "2px",
        right: "3px",
        bottom: "4px"
    };

    // 按参数依次去字典中取值
    var json = [posLorR, posTorB].reduce((r, name) => {
        r[name] = defined[name];
        return r;
    }, {});

    $btn.css(json);
}

有了上面的实现，其实还可以扩展一下，假如不限定参数，参数可以传入任意个，其值都是 "left"、"right"、"top"、"bottom" 中的一个(甚至可以重复)，那么这个方法可以改写为

function Style(...args) {
    var defined = { left: "1px", top: "2px", right: "3px", bottom: "4px" };

    var json = args.reduce((r, name) => {
        r[name] = defined[name];
        return r;
    }, {});

    return json;
}

注意，这里我没有直接在函数里设置 $btn.css()，因为我觉得还是让函数的职责单一点好，所以直接返回的 json (同时也方便测试)，测试结果如下：

Answer 3

有点奇怪的js代码：

不过如果我写Style函数的话，我可能会这么写：

function Style() {
    var config = {
        left: '1px',
        top: '2px',
        right: '3px',
        bottom: '4px',
    };
    var obj = {};
    Array.prototype.slice.call(arguments).forEach(function(attr) {
        obj[attr] = config[attr];
    });
    return obj; // 或者 $btn.css(obj);也行
}

Answer 4

function Style(posLorR,posTorB,$elem){ // 参数为要改变按钮$btn的样式属性
    var left = '1px' , top = '2px' , right = '3px' , bottom = '4px';    
    posLorR === 'left' && $elem.css('left',left);
    posLorR === 'right' && $elem.css('right',right);
    posTorB === 'top' && $elem.css('top',top);
    posTorB === 'bottom' && $elem.css('bottom',bottom);
}

Answer 5

我不太能理解这个需求，为什么一个参数要用用来接收2个值呢？还要分辨到底是左还是右，是上还是下。

改写一下参数的约定形式是不是更好

Answer 6

function Style(posLorR,posTorB ){ // 参数为要改变按钮$btn的样式属性
    var leftRight = {
            left:'1px',
            right:'3px',
        },
        topBottom = {
            top:'2px',
            bottom:'4px',
        };
   $btn.css({ right:leftRight[posLorR],bottom:topBottom[posTorB]}); 
}

这种？