Question

我有几个div和文本框。我想更改div边框颜色。这取决于文本框的值。但是文本框有时会增加，有时会减少，但它们不是一个特定数目

我尝试了这个，但是没用

$(document).ready(function(){
var val=document.getElementById('a').value;
if(val==25){
$(".b").parent().css({"color": "red", "border": "2px solid yellow"});
}
else if(val==50){
$(".b").parent().css({"color": "black", "border": "2px solid red"});
}
});

.abc { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body class="container">
  <div  class="abc">
        <input type="text" class="b" value="25" id="a"/>
  </div>
  <div class="abc">
        <input type="text" class="b" value="50" id="a"/>
  </div>
</body>

</html>

我该怎么做？

Answer 1

您的代码几乎没有问题：

if和else-if语句在加载文档时仅运行一次。您应该为此附加事件监听器。
您有两个具有相同id="a"的元素。 ID在整个页面中始终是唯一的
您应使用val将+转换为数字（在这种情况下，因为两倍等于==，所以罚款）。

$(document).ready(function(){
$('input').on('keyup',function(){
  let val = +this.value;
  console.log(val)
  if(val === 25){
    $(this).parent().css({"color": "red", "border": "2px solid yellow"});
  }
  else if(val === 50){
    $(this).parent().css({"color": "red", "border": "2px solid red"});
  }
  else $(this).parent().css({"color": "", "border": ""});

})
$('input').keyup();
});

.abc { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body class="container">
  <div  class="abc">
        <input type="text" class="b" value="25" id="a"/>
  </div>
  <div class="abc">
        <input type="text" class="b" value="50" id="b"/>
  </div>
</body>

</html>

Answer 2

如果这是为CSS边框更改颜色，则为。我使用了动画循环，而我所要做的就是随时间改变颜色。你会看到的。这非常简单而且非常有效。

#Title{
animation: colorchange 2s infinite;


}

@keyframes colorchange{
0%{border: 5px ridge blue;}
50%{border: 5px ridge green;}
100%{border: 5px ridge mediumseagreen;}
50%{border: 5px ridge purple;}
}

更改边框颜色取决于值

2 个答案: