即时图标颜色变化

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

由于您的问题没有任何颜色规格。我认为它是通用的。 您的方案有3种方法

  

1.您需要使用不同的图像并有条件地加载它。

     

2.使用像png或svg这样的透明图像并有条件地添加背景颜色。

     

3.使用CSS3的过滤属性

希望有所帮助

Answer 2

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

我按下按钮后会改变它，或者你想在输入有值时立即改变它？

修改

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

如果输入字段有值，则输入字段有值，这是一个实时检查的小提琴，如果输入有一个值：div square变为灰色。如果它没有值：div方块变为黄色

编辑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! :)" />