jQuery - 在 keyup 上从 Array 更改 CSS

Question

每次我点击收音机时，.tagdiv都会收到相应收音机的data-color。

如何将相同的原理应用于input type="text"，其中每个无线电值data-color都放入array中，并且.tag的background-color根据keyup上输入的值而变化？

我需要数组在range例如，如果值在 $25-$49 之间，则返回收音机的数据颜色，其中 value="25"，因为下一个收音机值="50"，如果键入，将返回 valu="50" 收音机的数据颜色。

例如：

("0-5"   -> data-color of first radio) 
("6-25"  -> data-color of second radio)  

("26-50" -> data-color of third radio) 
("26-50" -> data-color of fourth radio) 

("100+" -> custom background-color)

$(document).ready(function() {
$("#donation").keyup(function() {
$("input:radio[name=donation]").each(function() {
$(this).prop("checked", false);
});
});
$('input[name="donation"]').on("change", function() {
var color = $(this).attr("data-color");
$(".tag").css("background-color", color);
$("#donation").closest("div").removeClass("donation--active");
$("#donation").val(
this.checked ?
this.value :
$('input[name="donation"][name="' + this.name + '"]:checked').val()
);
});
$('input[name="donation"]').trigger("change");
});

*,
*::before,
*::after {
box-sizing: border-box;
}
::-webkit-input-placeholder {
color: #b6b6b6;
}
:-moz-placeholder {
color: #b6b6b6;
opacity: 1;
}
::-moz-placeholder {
color: #b6b6b6;
opacity: 1;
}
:-ms-input-placeholder {
color: #b6b6b6;
}
::-ms-input-placeholder {
color: #b6b6b6;
}
::placeholder {
color: #b6b6b6;
}
body {
background: #fff;
width: 100%;
margin: auto;
padding: 30px;
min-width: 320px;
max-width: 540px;
border-radius: 3px;
}
.inline-radio {
font-size: 19px;
display: -webkit-box;
display: flex;
border-radius: 3px;
}
.inline-radio div {
border: 1px solid #ededed;
margin-top: -1px;
margin-left: -1px;
position: relative;
-webkit-box-flex: 1;
flex: 1;
}
.inline-radio div:last-child {
color: #b6b6b6;
padding: 0 0.9rem;
display: flex;
align-items: center;
}
.inline-radio input[type="radio"] {
cursor: pointer;
width: 100%;
height: 60px;
opacity: 0;
}
.inline-radio input[type="text"] {
color: #b6b6b6;
font-size: inherit;
margin-left: 0.3rem;
display: flex;
border: none;
outline: none;
background: #0000ff00
}
.inline-radio label {
position: absolute;
top: 0;
left: 0;
color: #b6b6b6;
width: 100%;
height: 100%;
background: #fff;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
pointer-events: none;
}
.inline-radio input:checked+label {
border: 2px solid
}
.tag {
height: 120px;
width: 200px;
border: 2px solid
}
input#donation {
border: 3px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inline-radio">
<div><input type="radio" data-color="blue" value="5" name="donation"><label>$5</label></div>
<div><input type="radio" data-color="orange" value="25" name="donation" checked><label>$25</label></div>
<div><input type="radio" data-color="green" value="50" name="donation"><label>$50</label></div>
<div><input type="radio" data-color="red" value="100" name="donation"><label>$100</label></div>
<div><span>$</span><input id="donation" value="" name="donation" type="text"></div>
</div>
<div class="tag"></div>

Answer 1

您可以在keyup和外部添加此行.each()>>

$('input[name="donation"][value="'+$(this).val()+'"]').prop("checked" , true).change();

• $(this).val()是文本输入的值

• 'input[name="donation"][value="'+$(this).val()+'"]'选择他的值具有相同文本输入值的无线电输入

• .prop("checked" , true)..检查它

• .change()触发更改事件

更新：

OP 评论我需要这在一个范围内。因此，任何介于 $25-$49 之间的值都会返回收音机的数据颜色，其中 value="25"，因为 下一个无线电值=''50"。我已经更新了问题以尝试澄清 要求

• 将data-min和data-max属性添加到无线电输入

• 使用filter()筛选文本输入的值在数据最小值/最大值之间匹配的输入

• 使用布尔变量停止更改事件以更改键控时文本输入中的值

<小时 />

$(document).ready(function() {
var FormInputEvent = false;
var color = false; // <<<< here
var Over100Color = "black"; //<<<< here
var changeColor = function(el = null){
color = (color == false || FormInputEvent == false) ? $(el).attr("data-color") : color;
//console.log(color);
$(".tag").css("background-color", color);
$("#donation").closest("div").removeClass("donation--active");
};
$("#donation").on('input',function(e) {
var Value = $(this).val();
$("input:radio[name=donation]").prop("checked", false);
FormInputEvent = true;
color = Value > 100 ? Over100Color : false; // <<<< here
if(Value > 100){
changeColor();
}else{
$('input[name="donation"]').each(function(){
if (Value >= +$(this).data('min') && Value <= +$(this).data('max')){
$(this).prop('checked' , true);
changeColor(this);
}
});
}
});

$('input[name="donation"]').on("change", function() {
changeColor(this);
if(FormInputEvent == false){
$("#donation").val(
this.checked ?
this.value :
$('input[name="donation"][name="' + this.name + '"]:checked').val()
);
}
FormInputEvent = false;
}).filter(':checked').change();

});

*,
*::before,
*::after {
box-sizing: border-box;
}
::-webkit-input-placeholder {
color: #b6b6b6;
}
:-moz-placeholder {
color: #b6b6b6;
opacity: 1;
}
::-moz-placeholder {
color: #b6b6b6;
opacity: 1;
}
:-ms-input-placeholder {
color: #b6b6b6;
}
::-ms-input-placeholder {
color: #b6b6b6;
}
::placeholder {
color: #b6b6b6;
}
body {
background: #fff;
width: 100%;
margin: auto;
padding: 30px;
min-width: 320px;
max-width: 540px;
border-radius: 3px;
}
.inline-radio {
font-size: 19px;
display: -webkit-box;
display: flex;
border-radius: 3px;
}
.inline-radio div {
border: 1px solid #ededed;
margin-top: -1px;
margin-left: -1px;
position: relative;
-webkit-box-flex: 1;
flex: 1;
}
.inline-radio div:last-child {
color: #b6b6b6;
padding: 0 0.9rem;
display: flex;
align-items: center;
}
.inline-radio input[type="radio"] {
cursor: pointer;
width: 100%;
height: 60px;
opacity: 0;
}
.inline-radio input[type="text"] {
color: #b6b6b6;
font-size: inherit;
margin-left: 0.3rem;
display: flex;
border: none;
outline: none;
background: #0000ff00
}
.inline-radio label {
position: absolute;
top: 0;
left: 0;
color: #b6b6b6;
width: 100%;
height: 100%;
background: #fff;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
pointer-events: none;
}
.inline-radio input:checked+label {
border: 2px solid
}
.tag {
height: 120px;
width: 200px;
border: 2px solid
}
input#donation {
border: 3px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inline-radio">
<div><input type="radio" data-color="blue" value="5" name="donation" data-min="0" data-max="5"><label>$5</label></div>
<div><input type="radio" data-color="orange" value="25" name="donation" data-min="6" data-max="25" checked><label>$25</label></div>
<div><input type="radio" data-color="green" value="50" name="donation" data-min="26" data-max="50"><label>$50</label></div>
<div><input type="radio" data-color="red" value="100" name="donation" data-min="51" data-max="100"><label>$100</label></div>
<div><span>$</span><input id="donation" value="" name="donation" type="text"></div>
</div>
<div class="tag"></div>