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

Posted 2023-03-06

【中文标题】使用 jQuery 尝试更改文本框的背景颜色但在 wordpress 中不起作用

【英文标题】：Using jQuery trying to change background-color of text box but not working in wordpress

【发布时间】：2016-10-04 10:10:27

【问题描述】：

这是我正在使用的 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>

我把它放在我的插件函数文件#my_txtbox_id get value of color 但是background-color CSS 不起作用。

如何解决？

【问题讨论】：

#my_txtbox_id的元素类型是什么？

您想将一个输入的文本设置为另一个输入吗？

请显示html代码

不，我在我的插件link 中使用了 jscolor 选择器，你可以在这里看到我从中获得了价值 #my_txtbox_id 但background-color css 没有改变。

【参考方案1】：

颜色代码需要在前面加上 # 才能与 CSS 一起使用。

改变

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

到

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

编辑：您可以像这样进一步优化代码：

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

【讨论】：

得到了我想要的谢谢

当我更新帖子时，值仍然相同，但 background-color 再次更改