javascript – 2个类的颜色选择器Farbtastic同步
作者:互联网
http://acko.net/dev/farbtastic
我想有一些INPUT,用户可以为每个改变颜色.但是,每个输入都与其他一些类同步(如正文背景颜色或菜单背景颜色).
我希望能够使用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>
解决方法:
我不得不稍微修改farbtastic.js文件…基本上我添加了这一行:
$('.' + this.id).css('background-color',fb.color);
在原始脚本中的第234行下面.它从当前选定的输入框中获取ID,并更改与ID相同的类的背景颜色.因此,使用farbtastic更改#color1也会更新.color1类.如果您想要更改背景颜色以外的其他内容,您可能需要自己修改farbtastic.js.
在这里获取修改后的farbtastic.js并查看demo here.
标签:jquery,javascript,css,html,color-picker 来源: https://codeday.me/bug/20190705/1385991.html