0

入力値に基づいて CSS を作成 (または更新) しようとしています。要するに、テキスト入力フィールドから実行されるカラー ピッカーがあります。入力値 (別名、色の 16 進値) が変更された場合background、ページの別の要素の css をこの値で更新する必要があります。

私がやっていることはうまくいきません。私は何を間違っていますか？または、ライブ入力値に基づいて CSS を更新/置換する最良の方法は何ですか?

脚本：

    // Bar Background Color - Live Preview
    $('.bg_color').live("change", function() {

        var bg_color = $(this).val(); // grab color input value

        if ($(this).val().length > 0)
        {
            // replace css value on live preview 
            $('.campaignBar').css('background', bg_color);  
        } 
        else
        {
            //resorts back to default if no value entered
            $('.campaignBar').css('background', '#4575A1' });   
        }         

    });
4

2 に答える 2

2

これは私にとってはうまくいきます

$(document).ready(function() {
  $('.bg_color').miniColors({
    change: function(hex, rgba) {    
      if (hex.length > 0)
      {
       // replace css value on live preview 
       $('.campaignBar').css('backgroundColor', hex);  
      } 
      else
      {
        //resorts back to default if no value entered
        $('.campaignBar').css('backgroundColor', '#4575A1');   
      }         
     }
   }); 
 });
于 2012-11-19T17:55:39.853 に答える
0

JSFiddle

$('.bg_color').on("change", function() {
    var bg_color = $(this).val(); 
    if (bg_color.length > 2)
    {
        $('.campaignBar').css("background-color",'#'+bg_color);
    } 
    else
    {
        $('.campaignBar').css('background-color','#4575A1');   
    }         
});​

2より大きい値に設定しました。これは、16進値の場合、数値として認識されるためには3つ以上の数値が必要であるためです。

于 2012-11-19T17:59:32.063 に答える