為某些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 '));
    }
});