0

20 個の入力フィールドを持つフォームがあります。各入力フィールドは DIV 内にあります。キーアップ機能を介して DIV の背景色を変更するスクリプトと、他の 2 つの DIV タグがあります。

DIV と入力ごとにスクリプトを 20 回複製するのではなく、すべての DIV とその入力を行うようにスクリプトを書き直すことは可能ですか?

$(document).ready(function(){
    $("#id").keyup(function() {
       if($("#id").val().length > 0) $("#in1, #nu1, #lw1, #id").css("background-color","#2F2F2F").css("color", "#FFF");
       else {
 if($("#id").val().length == 0) $("#in1, #nu1, #lw1, #id").css("background-color","#E8E8E8").css("color", "#000");
       }
    });
});
4

3 に答える 3

2

すべてのdivの色を一度に変更したい場合、ここでの他の答えは正しいですが、それがあなたが求めているものかわかりません。

私の仮定は、次のようなコードが複数あることです。

<div>
   <input>
</div>

入力が 0 よりも長い場合は、コンテナー div の色を変更する必要があります。もしそうなら、これはあなたができることです：

まず、div に次のような共通のクラスを指定しinput-divます。

<div class="input-div">
   <input>
</div>

CSS クラスを作成します。

.input-div {
    color: #000;
    background-color: #E8E8E8
}
.highlight {
    color: #FFF;
    background-color: #2F2F2F
}

次に、jQuery 呼び出しで使用して、各ケースのハイライト クラスを適用/削除します。

$(".input-div input").keyup(function() {
   // Get parent div
   var myParent = $(this).parent('.input-div');

   // If input length is > 0, highlight the parent
   if($(this).val().length > 0) {
       myParent.addClass('highlight');
   } else {
       myParent.removeClass('highlight');
   }
});

if長さが でない場合は になるため> 0、余分な は必要ありません== 0。他の div も同様に色を変更したい場合は、それらにクラス/ID を与えるか、input-div. あなたのhtmlを見なければ、私はあなたを助けることができません.

デモ: http://jsfiddle.net/QB52B/

于 2012-04-09T17:46:16.457 に答える
0

通常のjQueryアプローチ

これが通常のjQueryアプローチに対する私の提案です。これらの基本的なアイデアを使用して、コード全体をクリーンアップできます。

  1. @Adilのソリューションを使用して、すべての入力を一度に、または単に$("input[type=text]")、あるいは何でも参照するクラスを追加します。
  2. .toggleClass()スタイリングを処理するためにを使用してください！

JSの例：

var $inputs = $("input[type=text]"); // or replace with className
$inputs.keyup(function() {
   var $this = $(this);
   $this.toggleClass("isEmpty", $this.val().length > 0)
});

CSSの例：

input[type=text] { /* or replace with className */
  color: black;
  background: gray;
}

.isEmpty {
   color: gray;
   background: black;
}

これにより、スタイルシートのスタイルが維持されます。toggleClassまた、コードをよりクリーンに保ちます。

純粋なCSSアプローチ

古いブラウザを削除して、純粋なCSSスタイルを使用したい場合は、このようなことをしているように見えるので、それほど難しいことではありません。プレースホルダーテキストのスタイリングに関するcss-tricksに関するこの記事をチェックしてください：

::-webkit-input-placeholder {
   color: gray;
   background: black;
}

:-moz-placeholder {
   color: gray;
   background: black;
}
于 2012-04-09T17:41:14.963 に答える
0

入力にクラスを追加し、#id を .classname に置き換えます。これらの行に沿ったもの：

$(".classname").keyup(function() {
if($(this).val().length > 0) $(this).parent().css("background-color",
 "#2F2F2F").css("color", "#FFF");
 else {
 if($(".classname").val().length == 0) $(this).parent().css("background-color",
 "#E8E8E8").css("color", "#000");
}

});
于 2012-04-09T17:30:23.760 に答える