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

【问题标题】：Using jQuery trying to change background-color of text box but not working in wordpress使用 jQuery 尝试更改文本框的背景颜色但在 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 没有改变。

标签： jquery html css wordpress

【解决方案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 再次更改