-2

div内に入力フィールドがあり、入力フィールドにデータが入力されたときにdivの背景を変更したいと思います。

これはどのように行われますか？

4

2 に答える 2

2

この問題を解決するには、jQuery を使用してみてください。タグにjQuery をロードし、jQuery を<head>含める下のスクリプト タグにこの JavaScript スニペットを追加して、入力フィールドの keypress イベントにアタッチします。

$(document).ready(function() {
    $("#myInput").keypress(function() {
        if($("#myInput").val().length > 0) $("#myDiv").css("background-color", "red");
    });
});
于 2012-04-08T04:42:26.917 に答える
0 
$('div input').keypress(function() {
    $(this).val().length > 0) {
        $(this).parent().css("background-color","red");
    } else {
        $(this).parent().css("background-color","none"); 
    }
});

Web デザイナーに親切にして友達になりたい場合は、クラス属性を動的に適用および削除することもできます。

$('div input').keypress(function() {
    $(this).val().length > 0) {
        $(this).parent().addClass("background");
    } else {
        $(this).parent().removeClass("background");
    }
});

その後、デザイナーは CSS の「background」クラス フックを使用して、CSS ファイルのルック アンド フィールを調整できます。美しい JavaScript の傑作が台無しになることを心配する必要はありません。また、すべてのプレゼンテーション ロジックをビジネス ロジック コードに入れることなく、柔軟に変更を加えることができます。

/* Example CSS rule */
input.background {
    background-color: red;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 6px 4px red;
}
于 2012-04-08T04:42:51.257 に答える