使用jQuery尝试改变文本框的背景颜色,但在wordpress中不工作

时间:2022-11-21 17:19:44

Here is jQuery code which I am using .

下面是我正在使用的jQuery代码。

<input class="jscolor" name="jscolor" value="F078A0" />
<input name="my_txtbox" type="text" id="my_txtbox_id" value="F078A0" />

<script type="text/javascript">
jQuery('.jscolor').on('change', function($) {
    var color = jQuery('.jscolor').val();
    jQuery('#my_txtbox_id').text(color);
    jQuery('#my_txtbox_id').attr('value',color);
    jQuery('#my_txtbox_id').css('background-color',color);
});
</script>

I put this in my plugin function file #my_txtbox_id get value of color but background-color CSS is not working.

我把这个放到我的插件函数文件#my_txtbox_id中获取颜色的值,但是背景色CSS不起作用。

How to solve this?

如何解决呢?

1 个解决方案

#1


3  

The color code needs a prepending # to be used with CSS.

颜色代码需要一个前置的#来与CSS一起使用。

Change

改变

jQuery('#my_txtbox_id').css('background-color',color);

To

jQuery('#my_txtbox_id').css('background-color', '#' + color);

Edit: You can further optimize the code like so:

编辑:你可以进一步优化代码如下:

jQuery(document).ready(function ($) {
    $('.jscolor').on('change', function (e) {
        var color = $(this).val();
        $('#my_txtbox_id').val(color).css('background-color', '#' + color);
    });
});

#1


3  

The color code needs a prepending # to be used with CSS.

颜色代码需要一个前置的#来与CSS一起使用。

Change

改变

jQuery('#my_txtbox_id').css('background-color',color);

To

jQuery('#my_txtbox_id').css('background-color', '#' + color);

Edit: You can further optimize the code like so:

编辑:你可以进一步优化代码如下:

jQuery(document).ready(function ($) {
    $('.jscolor').on('change', function (e) {
        var color = $(this).val();
        $('#my_txtbox_id').val(color).css('background-color', '#' + color);
    });
});