Question

我有2个表单字段（十六进制颜色），当用户单击它们时会激活它们。

如果用户正在编辑现有数据集，那么我会加载颜色并在页面加载时在字段中显示它们。如何在加载页面时运行脚本，以便在字段旁边显示正确的颜色？

那么在页面加载时如何运行$('#colorpicker1').colpick()和$('#colorpicker2').colpick()？

我正在运行的脚本是http://colpick.com/plugin（示例＃1，但在页面加载时，字段中的数据ALREADY）

由于

$(document).ready(function (){

$('#colorpicker1').colpick({
        layout:'hex',
        submit:0,
        onChange:function(hsb,hex,rgb,el,bySetColor) {
            $(el).css('border-color','#'+hex);
            // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
            if(!bySetColor) $(el).val(hex);
        }
    }).keyup(function(){
        $(this).colpickSetColor(this.value);
    });


    $('#colorpicker2').colpick({
        layout:'hex',
        submit:0,
        onChange:function(hsb,hex,rgb,el,bySetColor) {
            $(el).css('border-color','#'+hex);
            // Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
            if(!bySetColor) $(el).val(hex);
        }
    }).keyup(function(){
        $(this).colpickSetColor(this.value);
    });
});

Answer 1

$(window).load(function(){
    $('#colorpicker1, #colorpicker2').colpick()
});

试试这个：

Answer 2

请参考所提及的JS＆amp; amp; colorpicker的CSS取自您链接的网站。

http://plnkr.co/edit/nYSY6b7JJwdHXJ7SmcdP?p=preview

理想情况下，这种模式可以解决您的问题 -

<script>
$(function(){
  $(".className").colpick({
  /*
     Inner Code.
  */
  });
});
</script>

修改好的，所以你的问题与插件无关。看一下更新的plunker- http://plnkr.co/edit/nYSY6b7JJwdHXJ7SmcdP?p=preview

$.each($('.colorpicker'),function(){ $(this).css('background','#'+$(this).val()); });

这将解决您的问题，因为该插件没有任何方便的方法/选项。

编辑 - 最终解决方案

要加载输入字段中已有的颜色，并正确激活脚本，请按照以下步骤操作：

$.each($('.colorpicker'),function(){ //init code var defCol = $(this).val(); $(this).css('border-color','#'+defCol); //plugin $(this).colpick({ layout:'hex', submit:0, color: defCol, onChange:function(hsb,hex,rgb,el,bySetColor) { $(el).css('border-color','#'+hex); // Fill the text box just if the color was set using the picker, and not the colpickSetColor function. if(!bySetColor) $(el).val(hex); } }).keyup(function(){ $(this).colpickSetColor(this.value); }); });

Answer 3

$( document ).ready()就是您所需要的。

以这种方式使用：

$( document ).ready(function(){

  // the document is ready now, do stuff here

});

$( document ).ready() | jQuery Learning Center

Answer 4

Jquery提供onload或ready函数来在加载时执行脚本 -

$（document）.ready（function（）{

  alert("document ready occurred!");

}）;

$（window）.load（function（）{

  alert("window load occurred!");

}）;

Answer 5

要在文档准备就绪时执行某些功能，请使用：

$(document).ready(function(){
    $('#colorpicker1').colpick()
    $('#colorpicker2').colpick()
})

在页面加载时运行一次Jquery代码

5 个答案: