输入字段更改时触发 jQuery 颜色选择器插件的刷新

Question

我目前正在使用 jQuery .click() 方法用简单的颜色十六进制值更新 15 个文本字段，即像这样 document.form1.top_menu_bgcolor.value = '#FFFFFF';

我还使用 ExColor for jQuery http://modcoder.org/ 来显示杀手级颜色选择器 http://modcoder.org/js/modcoder-1.1.js

问题是，当您单击更新字段时，颜色选择器样本不会刷新。

当字段更改时，如何简单地重新激活或刷新样本？我可以在下面的 .click 函数中调用什么来将样本刷新为新的十六进制字符串、输入值？

这是 JS：

<script type="text/javascript">

    $('document').ready(function() {

        // running ExColor
        $('#my_input_1').modcoder_excolor();
    $('#my_input_2').modcoder_excolor();
    $('#my_input_3').modcoder_excolor();
    $('#my_input_4').modcoder_excolor();
    $('#my_input_5').modcoder_excolor();
    $('#my_input_6').modcoder_excolor();
    $('#my_input_7').modcoder_excolor();
    $('#my_input_8').modcoder_excolor();
    $('#my_input_9').modcoder_excolor();
    $('#my_input_10').modcoder_excolor();
    $('#my_input_11').modcoder_excolor();
    $('#my_input_12').modcoder_excolor();
    $('#my_input_13').modcoder_excolor();
    $('#my_input_14').modcoder_excolor();
    $('#my_input_15').modcoder_excolor();    

        $('#theme01').click(function() {
            document.form1.top_menu_bgcolor.value = '#FFFFFF';
        document.form1.top_menu_bgcolor.focus();
        document.form1.top_menu_fontcolor.value = '#FFFFFF';
        document.form1.top_menu_bghovercolor.value = '#FFFFFF';
        document.form1.top_menu_fonthovercolor.value = '#FFFFFF';
        document.form1.left_menu_bgcolor.value = '#FFFFFF';
        document.form1.left_menu_fontcolor.value = '#FFFFFF';
        document.form1.left_menu_bghovercolor.value = '#FFFFFF';
        document.form1.left_menu_fonthovercolor.value = '#FFFFFF';
        document.form1.left_div_border.value = '#FFFFFF';
        document.form1.site_background_color.value = '#FFFFFF';
        document.form1.header_color.value = '#FFFFFF';
        document.form1.content_header_color.value = '#FFFFFF';
        document.form1.browser_bg_color.value = '#FFFFFF';
        document.form1.footer_color.value = '#FFFFFF';
        document.form1.footer_font_color.value = '#FFFFFF';

        });

</script>

和 HTML

<a href="#" id="theme01">Theme 1</a>


<input type="text" ID="my_input_1" name="top_menu_bgcolor" maxlength="7" value="#000000" size="10" />

Answer 1

您可以尝试使用类似的内容：

   <script type="application/javascript">
      $(document).ready(function(){

      $("#theme01").click(function(){
       $("#myinput1").val('#aaafFF');   
       $('#myinput1').click();
       setTimeout( function(){
            $('#c3').blur();
            $('#c3').click();
            $('#c3').blur();}, 
       50);
   return false;
      });

      });
 </script>

其中 #c3 是某处的不同 div。

这实际上会以足够快的速度显示和隐藏调制器，用户看不到它。

编辑：完整答案

        $("#theme01").click(function(){
            $("#myinput1").val('#aaaFFF');
            $('#myinput1').click();
            setTimeout( function(){$('#modcoder_ok').click();}, 50);
        });

        $("#theme02").click(function(){
            $("#myinput1").val('#222ccc');
            $('#myinput1').click();
            setTimeout( function(){$('#modcoder_ok').click();}, 50);
        });

然后在 html 中：
主题1
主题 2

我使用两个按钮，延迟的 #modcode_ok.click() 以编程方式单击 ok 按钮来选择并刷新颜色。
在我的电脑上，50ms 的 setTimeout 太快了，我看不到弹出窗口。也许您需要根据您的需求进行调整。