为一些jquery数组拆分创建更高效​​的代码

Question

我正在玩jquery，并想知道你是否可以帮助我提高代码效率。下面是我到目前为止唯一可以使用的工作代码。任何其他试验都不满意：

HTML

<div class="someparent">...<p><input type="text"  value="0 0 12 12" class="radius"></p></div>

JQUERY：

    $('input.radius').each(function() {
            var preview = $(this).parents('.someparent');   

            $(this).keyup(function() {
                var rad = $(this).val();

                c = rad.split(' ');
                tl = c[0] ? c[0] + 'px' : '';
                tr = c[1] ? c[1] + 'px' : '';
                bl = c[2] ? c[2] + 'px' : '';
                br = c[3] ? c[3] + 'px' : '';

                var radius = tl + ' ' +  tr + ' ' + bl + ' ' + br;              
                $(preview).css('border-radius', radius);
            });
            if ($(this).val()) {
                var rad = $(this).val();

                c = rad.split(' ');
                tl = c[0] ? c[0] + 'px' : '';
                tr = c[1] ? c[1] + 'px' : '';
                bl = c[2] ? c[2] + 'px' : '';
                br = c[3] ? c[3] + 'px' : '';

                var radius = tl + ' ' +  tr + ' ' + bl + ' ' + br;                  
                preview.css('border-radius', radius);
            }
     });

基本上，代码希望根据任何输入动态更新属性，同时在默认情况下保持其当前状态。 谢谢你的帮助

Answer 1

如果值始终没有像素，则只需使用：

$('input.radius').each(function() {
    var preview = $(this).parents('.someparent'); 

    $(this).keyup(function() {
        var rad = $(this).val();
        c = rad.split(' ').join('px ');
        $(preview).css('border-radius', c);
    }).keyup(); // trigger keyup manually to initial
});

Answer 2

对于文字更改，我更喜欢使用change事件。

$('input.radius').change(function() {
    var $this = $(this);
    var rad = $this.val();
    if (rad) {
        $this.parents('.someparent').css('border-radius', rad.split(' ').join('px '));
    }
});