Question

我正在尝试通过其id监听输入字段更改，其中输入字段绑定到虹膜颜色选择器。以下是示例代码：

HTML

输入字段

<input type="text" id="input_id" class="elmnt_color"/>

要更改的元素

<div id="box">Manipulate this!</div>

JQUERY

绑定更改

$('.elmnt_color').iris({
    change: function(event, ui) {   
    $(this).siblings("input").change(); 
    }
});

通过id

收听输入更改

$("#input_id").on("change", function(){

   var style = '<style type="text/css">';
   style += '#box {background: ' + $(this).val() + '}';
   style += '</style>';

   $('head').append(style);

});

问题：

非常慢
1步太晚了。例如＆＃34;当虹膜颜色选择器的颜色发生变化时从blue到red，#box背景颜色仍为blue，而不是red。等等。＆＃34;。

问题：

我应该使用什么来触发input field更改虹膜颜色选择器更改而不是这些代码：

change: function(event, ui) {   
$(this).siblings("input").change(); 
}

所以我可以摆脱上面提到的问题。

非常感谢任何帮助！

最好的问候

Answer 1

无需触发和处理额外的input change事件。
可以使用jQuery .css()更改Element的CSS样式。它肯定比在每次更改时添加<style>要好得多。

所以你的代码可以简化为这个代码：

Fiddle

$(document).ready(function()
{
    var box = $('#box');

    $('.elmnt_color').iris(
    {
        change: function(event, ui)
        {
            box.css("background", this.value);
        }
    });
});

jQuery - 在虹膜颜色选择器更改时检测输入字段更改

1 个答案: