2班

Question

http://acko.net/dev/farbtastic

拾色器Farbtastic同步，我想有幾個輸入和用戶可以爲每個改變顏色。但是，每個輸入都與其他一些類（如正文背景顏色或菜單背景顏色）同步。

我想用Farbtastic拾色器改變顏色，它會影響與INPUT同步的INPUT和CLASS/ID。怎麼做？下面的例子將使「colorwell」中的顏色變化，但如何將其他元素分別同步到＃color1，＃color2 ...。由於

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
    $('#demo').hide(); 
    var f = $.farbtastic('#picker'); 
    //var p = $('#picker').css('opacity', 0.25); 
    //var selected; 
    $('.colorwell') 
     .each(function() { f.linkTo(this); }) 
     .focus(function() { 
     //if (selected) { 
     // $(selected).css('opacity', 0.75).removeClass('colorwell-selected'); 
     //} 
     f.linkTo(this); 
     //p.css('opacity', 1); 
     //$(selected = this).css('opacity', 1).addClass('colorwell-selected'); 
     }); 
    }); 
</script> 


<form action="" style="width: 500px;"> 
    <div id="picker" style="float: right;"></div> 
    <div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div> 
    <div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div> 
    <div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div> 

</form> 

Answer 1

我不得不修改farbtastic.js略有文件......基本上我加入這一行：

$('.' + this.id).css('background-color',fb.color); 

低於線234在最初的劇本。它從當前選擇的輸入框中獲取ID，並更改與ID相同的類的背景顏色。所以改變#color1與farbtastic也將更新.color1類。如果你想改變背景色以外的東西，你可能需要自己修改farbtastic.js。

在此處獲取修改後的farbtastic.js並查看demo here。