$(function(){
var back_color = $('.pickfield').val();
$('.pickfield').css("background", back_color);
});
<input type="text" name="name1" value="name1の値" class="pickfield" />
<input type="text" name="name2" value="name2の値" class="pickfield" />
カラーピッカーを実現したく上記のようなコードを書いており、
当然ではありますが上記のコードのままだと、
両方のinputの背景色が「value="name1の値"」の値になってしまいます。
本当はthisを使ってそれぞれのvalueの値を背景色に反映させたいと思っていますがどのように記述すればよろしいでしょうか？
No.1
811
232
200pt
動作確認してないです、バグったらすみません。
$('.pickfield').each(function(){ var back_color = $(this).val(); $(this).css("background", back_color); }
71
66
1
1
期待どおりの動作になりました。
ありがとうございます！
メモ書きとして今回実現できたコード入れておきます。
http://www.eyecon.ro/colorpicker/
こちらのプラグインを利用しました。
$(function(){
$('.pickfield').each(function(){
var back_color = $(this).val();
$(this).css("background", back_color);
});
$('.pickfield').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
$(el).css("background", "#"+ hex);
$(el).val('#'+hex);
$(el).next().val('#'+hex);
$(el).ColorPickerHide();
},
onBeforeShow: function () {
$(this).ColorPickerSetColor(this.value);
}
})
.bind('keyup', function(){
$(this).ColorPickerSetColor(this.value);
});
}) ;