インスタントアイコンの色変更

Question

ページに複数のテキストボックスがあります。各TextBoxの隣にアイコンがあります。テキストボックスがいっぱいの場合、アイコンはグレーですが、空白の場合は色をつけてください。どうすればJqueryでこれを行うことができますか？

$(".my-input").each(function() {     
    var txtvalue = $(this).val(); 
    if (txtvalue==" ") { 
     //I don't know how to change the color 
    } else { } 
     //I don't know how to change the color 
}); 

Answer 1

https://jsfiddle.net/FllnAngl/ps02f00k/3/

ホープあなたがボタンを押した後、それが変化し、またはあなたは、むしろインスタント変化がなるように入力が値を持つとすぐに？入力フィールドに値を持っているか、いない場合、入力が値を持っている場合

---

EDITは

https://jsfiddle.net/FllnAngl/ps02f00k/4/

ここで、ライブチェックとフィドルです：divの広場が灰色になります。それが値を持っていない場合は、次のdivの正方形が黄色に変わり

---

EDIT 2

https://jsfiddle.net/FllnAngl/45xyomdh/2/

ここ

とすぐに何かがありますとしての色を変更する矢印形のdivとフィドルです入力フィールドに

/*if input is full, make yellow arrow gray*/ 
 
$('.input1').on('keyup', function() { 
 
    var value = $('.input1').val(); 
 

 
    if (value === "") { 
 
    $('.arrow_box').css('border', '4px solid rgba(255, 225, 0, 1)'); 
 
    $('.arrow_box').removeClass('aftertoggle'); 
 
    $('.arrow_box').removeClass('beforetoggle'); 
 
    } else { 
 
    $('.arrow_box').css('border', '4px solid rgb(128,128,128)'); 
 
    $('.arrow_box').addClass('aftertoggle'); 
 
    $('.arrow_box').addClass('beforetoggle'); 
 
    } 
 
})

.square { 
 
    width: 25px; 
 
    height: 25px; 
 
    float: left; 
 
    margin-top: 10px; 
 
} 
 

 
.input1 { 
 
    height: 19px; 
 
    margin-left: 15px; 
 
} 
 

 
.arrow_box { 
 
    position: relative; 
 
    background: #88b7d5; 
 
    border: 4px solid rgba(255, 225, 0, 1); 
 
} 
 

 
.arrow_box:after, 
 
.arrow_box:before { 
 
    left: 100%; 
 
    top: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.arrow_box:after { 
 
    border-color: rgba(136, 183, 213, 0); 
 
    border-left-color: rgba(255, 225, 0, 1); 
 
    border-width: 10px; 
 
    margin-top: -10px; 
 
} 
 

 
.arrow_box:before { 
 
    border-color: rgba(194, 225, 245, 0); 
 
    border-left-color: rgba(255, 225, 0, 1); 
 
    border-width: 12px; 
 
    margin-top: -12px; 
 
} 
 

 
.aftertoggle:after { 
 
    border-color: rgba(136, 183, 213, 0) !important; 
 
    border-left-color: rgb(128, 128, 128) !important; 
 
    border-width: 10px; 
 
    margin-top: -10px; 
 
} 
 

 
.beforetoggle:before { 
 
    border-color: rgba(194, 225, 245, 0) !important; 
 
    border-left-color: rgb(128, 128, 128) !important; 
 
    border-width: 12px; 
 
    margin-top: -12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="square"> 
 
    <div class="arrow_box"> 
 
    </div> 
 
</div> 
 
<input type="text" class="input1" placeholder="Type something! :)" />

Answer 2

あなたの質問は、任意の色の仕様を持っていないので。私はそれを一般的なものと見なします。 シナリオには3つのアプローチがあります。

1.異なるイメージを使用して条件付きで読み込む必要があります。

2.pngやsvgのような透明な画像を使用し、条件付きで背景色を追加します。 CSS3

の

3.Useフィルタの特性は、それは私がそれを作った