Question

I am having fun with jquery, and wonder if you can help make my code more efficient. Below is the only working code I can do so far. Any other trial is not happy:

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);
            }
     });

Basically the code wants to update dynamically the properties based on any input, while keeping its current state whenever available as default.
Thanks for any help

Answer 1

if values always initial without pixel, simply use:

$('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
});