gpt4 book ai didi

javascript - 如何在选定的特定输入框上触发其他输入框

转载 作者:行者123 更新时间:2023-11-30 15:51:54 26 4
gpt4 key购买 nike

我希望能够选择一个输入框,并在它被触发之前选择那些输入框。我不知道如何使用 javascript 执行此操作。

例如,如果用户按下第一个框,则只有该框应该处于事件状态,但如果用户按下第二个框,则第一个和第二个框应该触发。

下面的代码片段显示我可以一次激活一个框,但我希望能够触发之前的框,而无需在选择第二个、第三个和最后一个框后手动执行。

function color(campo) {
valor_campo = document.getElementById(campo).value;
if (valor_campo == 0) {
document.getElementById(campo).style.background = '#000';
document.getElementById(campo).style.color = '#000';
document.getElementById(campo).value = 1;
} else if (valor_campo == 1) {
document.getElementById(campo).style.background = '#fff';
document.getElementById(campo).style.color = '#fff';
document.getElementById(campo).value = 0;
}
}

function colors() {

if (document.getElementById('cc11_a').value == 0) {
document.getElementById('cc11_a').style.background = '#fff';
document.getElementById('cc11_a').style.color = '#fff';
document.getElementById('cc11_a').value = 0;
} else if (document.getElementById('cc11_a').value == 1) {
document.getElementById('cc11_a').style.background = '#000';
document.getElementById('cc11_a').style.color = '#000';
document.getElementById('cc11_a').value = 1;
}

if (document.getElementById('cc11_b').value == 0) {
document.getElementById('cc11_b').style.background = '#fff';
document.getElementById('cc11_b').style.color = '#fff';
document.getElementById('cc11_b').value = 0;
} else if (document.getElementById('cc11_b').value == 1) {
document.getElementById('cc11_b').style.background = '#000';
document.getElementById('cc11_b').style.color = '#000';
document.getElementById('cc11_b').value = 1;
}

if (document.getElementById('cc11_c').value == 0) {
document.getElementById('cc11_c').style.background = '#fff';
document.getElementById('cc11_c').style.color = '#fff';
document.getElementById('cc11_c').value = 0;
} else if (document.getElementById('cc11_c').value == 1) {
document.getElementById('cc11_c').style.background = '#000';
document.getElementById('cc11_c').style.color = '#000';
document.getElementById('cc11_c').value = 1;
}

if (document.getElementById('cc11_d').value == 0) {
document.getElementById('cc11_d').style.background = '#fff';
document.getElementById('cc11_d').style.color = '#fff';
document.getElementById('cc11_').value = 0;
} else if (document.getElementById('cc11_d').value == 1) {
document.getElementById('cc11_d').style.background = '#000';
document.getElementById('cc11_d').style.color = '#000';
document.getElementById('cc11_d').value = 1;
}

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="colors();">
<td colspan="3" style="text-align:left">

<input name="cc11_a" type="text" class="text" id="cc11_a" onclick="color(this.id);" style="width:0.3cm;" value="" />
<input name="cc11_b" type="text" class="text" id="cc11_b" onclick="color(this.id);" style="width:0.3cm;" value="" />
<input name="cc11_c" type="text" class="text" id="cc11_c" onclick="color(this.id);" style="width:0.3cm;" value="" />
<input name="cc11_d" type="text" class="text" id="cc11_d" onclick="color(this.id);" style="width:0.3cm;" value="" />

</td>

最佳答案

我简化了您的代码并提供了解决方案。

color函数首先从id中提取元素的编号,即

  • 'cc11_a' 变为 0
  • 'cc11_b' 变为 1
  • 等等

然后从该数字向下循环到 0,即如果数字是 2,则它循环通过 210。对于其中的每一个数字,它都会调用 toggleElmt 函数。

toggleElmt 函数首先将数字转换回 id,例如2 变为 'cc11_c' 并检索具有该 ID 的元素。然后它获取该元素的 value,使用它来更改其背景和文本的颜色。最后,它使用一种可靠的方法在 0 和 1 之间切换数字,这基本上可以简化为 someValue = 1 - someValue

var twoColors = ['#000', '#fff'];

function color(campoId) {
var campoNum = campoId.charCodeAt(campoId.length - 1);
for (var num = campoNum; num >= 97; num -= 1) {
toggleElmt(num);
}
}

function toggleElmt(num) {
var campoElmt = document.getElementById('cc11_' + String.fromCharCode(num));
var valor_campo = campoElmt.value;
campoElmt.style.background = twoColors[valor_campo];
campoElmt.style.color = twoColors[valor_campo];
campoElmt.value = 1 - valor_campo;
}
input {
width: 0.3cm;
background: white;
color: white;
}
<input id="cc11_a" onclick="color(this.id);" value="0" />
<input id="cc11_b" onclick="color(this.id);" value="0" />
<input id="cc11_c" onclick="color(this.id);" value="0" />
<input id="cc11_d" onclick="color(this.id);" value="0" />

关于javascript - 如何在选定的特定输入框上触发其他输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39194164/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com