Javascript 在字段中输入文本更改div的背景色_Javascript_Jquery

Javascript 在字段中输入文本更改div的背景色

javascript jquery

Javascript 在字段中输入文本更改div的背景色,javascript,jquery,Javascript,Jquery,我想让div背景颜色仅在输入字段中有文本时更改颜色，如果没有文本，则颜色不会更改或恢复为原始颜色。这是我到目前为止的代码，它不起作用 <script type="text/javascript"> $(document).ready(function () { $('#inputDatabaseName').change(function () { $(this).parent().find('#colorchange').css('

我想让div背景颜色仅在输入字段中有文本时更改颜色，如果没有文本，则颜色不会更改或恢复为原始颜色。这是我到目前为止的代码，它不起作用

<script type="text/javascript">
    $(document).ready(function () {
        $('#inputDatabaseName').change(function () { 
            $(this).parent().find('#colorchange').css('background-color','#ff0000');
            $(this).css('background-color','#ff0000');
    });
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="colorchange">
        <input id="inputDatabaseName">
        <table id="searchResults"><tr><td>empty</td></tr></table>
    </div>
    </form>
</body>


$（文档）.ready（函数（）{
$（'#inputDatabaseName'）.change（函数（）{
$（this.parent（）.find（'#colorchange'）.css（'background-color'，'#ff0000'）；
$（this.css（'background-color'，'#ff0000'）；
});
空的

我建议使用类而不是更改CSS属性。这应该行得通

$(function () {
    $('#inputDatabaseName').keypress(function () { 
        var $this = $(this),
            $div = $(this).parent(); // Cache the jQuery selectors to make code faster
        if ($this.val().length > 0) {
            $div.addClass("hasContent");
        } else {
            $div.removeClass("hasContent");
        }
    });
});

现在添加一些CSS：

#colorchange { background-color: white } /* default color */
#colorchange.hasContent { background-color: red } /* updated color */
#colorchange #inputDatabaseName { background-color: white } /* default color */
#colorchange.hasContent #inputDatabaseName { background-color: red } /*updated color*/

您似乎瞄准了错误的元素

你的选择器应该是

$(this).parent('#colorchange')

$（this）.parent（）指向div id=“colorchange”>

你正试图再次找到它的孩子
如果希望立即反映更改，请使用keyup
事件而不是change

而且ID
在页面上应该是唯一的。
所以$（'#colorchange'）.css（
应该可以
$(document).ready(function () {
    $('#inputDatabaseName').keyup(function () {
        var $this = $(this);
        $colorDiv = $('#colorchange');
        defaultColor = 'initial';
        // If value is not empty assign a color
        // otherwise this will be set to default.
        if ($this.val() !== '') {
            defaultColor = '#ff0000';
        }
        $('#colorchange').css('background-color', defaultColor);
        $this.css('background-color', defaultColor);
    });
});

您可以使用此javascript执行此操作
     $('#inputDatabaseName').change(function () { 
         if($(this).val() ==="") {
             $(this).parents('#colorchange').css('backgroundColor','red');}
         else {
             $(this).parents('#colorchange').css('backgroundColor','green');
         }
     });

您的JS甚至看起来都无效。请尝试jsfiddle.net（jshint）长话短说，您关闭了更改函数，但没有关闭就绪函数。请修复此问题，然后重试。以后，请检查错误控制台。您的代码只更改输入字段的颜色，而不更改其内部的div。您没有提到更新输入字段……我将在几分钟后更新。