在字段中輸入文本更改div的背景顏色

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">

您正在嘗試再次尋找將搜索其子級的子級

如果要立即反映change ，請使用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);
    });
});

檢查小提琴

Answer 3

您可以使用此javascript完成

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

在字段中輸入文本更改div的背景顏色

問題描述

3 個解決方案

解決方案1
0 已采納 2013-08-01 19:24:51

解決方案2
0 2013-08-01 19:25:03

解決方案3
0 2013-08-01 19:36:12

在字段中輸入文本更改div的背景顏色

問題描述

3 個解決方案

解決方案1 0 已采納 2013-08-01 19:24:51

解決方案2 0 2013-08-01 19:25:03

解決方案3 0 2013-08-01 19:36:12

解決方案1
0 已采納 2013-08-01 19:24:51

解決方案2
0 2013-08-01 19:25:03

解決方案3
0 2013-08-01 19:36:12