いくつかの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 ')); 
    } 
});