Question

我想让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>

Answer 1

我建议使用类而不是更改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*/

Answer 2

您好像是针对错误的元素

你的选择器应该是

$(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);
    });
});

<强> Check Fiddle

Answer 3

你可以用这个javascript

来做

     $('#inputDatabaseName').change(function () { 
         if($(this).val() ==="") {
             $(this).parents('#colorchange').css('backgroundColor','red');}
         else {
             $(this).parents('#colorchange').css('backgroundColor','green');
         }
     });

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

3 个答案: