我有一段從用戶那里獲得10個輸入值(整數(shù)和浮點數(shù))的代碼:
var in1 = parseInt(document.getElementById("in1").value);
var in2 = parseInt(document.getElementById("in2").value);
var in3 = parseFloat(document.getElementById("in3").value);
var in4 = parseFloat(document.getElementById("in4").value);
var in5 = parseInt(document.getElementById("in5").value);
var in6 = parseInt(document.getElementById("in6").value);
var in7 = parseInt(document.getElementById("in7").value);
var in8 = parseFloat(document.getElementById("in8").value);
var in9 = parseFloat(document.getElementById("in9").value);
var in10 = parseInt(document.getElementById("in10").value);然后，我將所有輸入放入一個數(shù)組中，這樣它們更容易處理:
var arr = [in1, in2, in3, in4, in5, in6, in7, in8, in9, in10];其思想是通過迭代值來調(diào)整HTML容器的CSS，并調(diào)整特定的容器，其值等于0。
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 0) {
document.getElementById(**container of the corresponding arr[i] value**).style.color = "red";
} else {
document.getElementById(**container of the corresponding arr[i] value**).style.color = "black";
}
}現(xiàn)在我該如何解決這個問題？
我可以讓代碼運行，如果我只處理一個容器，比如說in1，那么如果我把(& quotin1 & quot)而不是
(**container of the corresponding arr[i] value**)您可以按類選擇所有輸入，然后遍歷它們。在keyup或更改時添加事件偵聽器。在事件回調(diào)中，您可以根據(jù)想要檢查的條件改變顏色。在本例中，輸入中的文本根據(jù)值的長度改變顏色。
const inputs = document.getElementsByClassName("colorInput")
for (let i = 0; i < inputs.length; i++) {
inputs[i].addEventListener (
"keyup",
(event) => {
event.target.style.color = event.target.value.length > 10 ? "red" : "green"
}
)
}<input type="text" class="colorInput">
<input type="text" class="colorInput">
<input type="text" class="colorInput">
<input type="text" class="colorInput">編輯:如果可能的話，跟隨@tacoshy的回答
首先，我將創(chuàng)建一個包含值、解析器和元素的對象數(shù)組 其中parser是從HTML元素(parseInt或parseFloat)轉(zhuǎn)換值的解析器。而其中的element是HTML/DOM元素，所以不必過多調(diào)用document.getElementById，因為每次需要的時候都使用它并不具有性能。
const arr = [
{ parser: parseInt, element: document.getElementById("in1") },
{ parser: parseInt, element: document.getElementById("in2") },
{ parser: parseFloat, element: document.getElementById("in3") },
{ parser: parseFloat, element: document.getElementById("in4") },
{ parser: parseInt, element: document.getElementById("in5") },
{ parser: parseInt, element: document.getElementById("in6") },
{ parser: parseInt, element: document.getElementById("in7") },
{ parser: parseFloat, element: document.getElementById("in8") },
{ parser: parseFloat, element: document.getElementById("in9") },
{ parser: parseInt, element: document.getElementById("in10") },
];當(dāng)您想要設(shè)置te color時，可以通過使用js for-of循環(huán)來遍歷它，其中我們還使用ES6對象析構(gòu)來獲取解析器和作為變量的元素。
然后我們使用帶有元素值的解析器將它解析成一個數(shù)字。
for (const { parser, element } of arr) {
let color = "black";
if (parser(element.value) === 0) {
color = "red";
}
element.style.color = color;
}太復(fù)雜了。給它們指定相同的類，并使用querySelectorAll選擇它們。然后使用forEach迭代所有這些元素。使用三元條件運算符來應(yīng)用顏色:
/* runs the function if the DOM is parsed */
window.addEventListener('DOMContentLoaded', function() {
/* gets all the inputs */
const INPUTS = document.querySelectorAll('input');
function checkInputs() {
INPUTS.forEach(input => {
let value = parseFloat(input.value);
input.style.color = (value === 0) ? 'red' : 'black';
})
};
/* excutes the check at the start */
checkInputs();
/* executes the check again if a change within the inputs has been made */
INPUTS.forEach(el =>
el.addEventListener('change', checkInputs)
);
})/* for visualization purpose only */
input {
width: 5em;
display: block;
margin-bottom: 0.5em;
}<input type="number" id="in1" value="0">
<input type="number" id="in2" value="5">
<input type="number" id="in3" value="0">
<input type="number" id="in4" value="5">
<input type="number" id="in5" value="5">
<input type="number" id="in6" value="0">
<input type="number" id="in7" value="0">
<input type="number" id="in8" value="5">
<input type="number" id="in9" value="0">
<input type="number" id="in10" value="0">在我看來:如果一些值是parseFloat，而另一些值是parseInt，那么當(dāng)值改變時，如果您想添加一個事件來更新顏色，這將導(dǎo)致一個問題。
對于parseInt值，顏色將保持為紅色，直到達(dá)到一個Int數(shù)(在本例中為1或-1 ),但對于浮點數(shù)(0.1、0.2、0.3、0.4、0.5)則沒有問題...0.9)或負(fù)值(-0.1，-0.2，-0.3，-0.4，-0.5...-0.9).
使用parseInt()時，任何非整數(shù)值都將被轉(zhuǎn)換為0
這里有一個片段，即使它并不優(yōu)雅，當(dāng)你改變價值觀時，你就會明白這個問題了。
輸入字段中的選項step = & quot0.1 & gt；min = & quot-10 & quot；max = & quot10 & quot是可選的。
第一個片段只是為了理解錯誤，在第一個片段下面還有另一個片段來解決問題。
let elements_values=[];
function getHTMLElements(){
for (var i=1; i <=10; i++){
var el = "in" + i;
elements_values.push({element:document.getElementById(el),value:0,id:i-1});
element:document.getElementById(el).addEventListener("change",dealChange);
}
}
//getElementsValues is not suitable (see snippet 2)
function getElementsValues(){
elements_values[0].value = parseInt(elements_values[0].element.value);
// the value is 0.9 but with parseInt this element will display a red style
// if you change the value to 1 it will become black again
elements_values[1].value = parseInt(elements_values[1].element.value);
elements_values[2].value = parseFloat(elements_values[2].element.value);
// the value is 0.3 and due to parseFloat this element will display a black style
elements_values[3].value = parseFloat(elements_values[3].element.value);
// the value is 0 and due to parseFloat this element will display a red style
// a black style will be used if you change the value OK
elements_values[4].value = parseInt(elements_values[4].element.value);
elements_values[5].value = parseInt(elements_values[5].element.value);
elements_values[6].value = parseInt(elements_values[6].element.value);
// the value is 0 and due to parseFloat this element will display a red style
// a black style will be used if you change the value OK
elements_values[7].value = parseFloat(elements_values[7].element.value);
elements_values[8].value = parseFloat(elements_values[8].element.value);
elements_values[9].value = parseInt(elements_values[9].element.value);
// the value is -0.6 but with parseInt this element will display a red style
}
// see the other snippet to change this function.
function logObjects(){
for (var i=0; i <10; i++){
console.log("element = " + elements_values[i].element + " value = " + elements_values[i].value + " id = " + elements_values[i].id);
}
}
function styleObject(){
for (var i = 0; i < elements_values.length; i++) {
if (elements_values[i].value === 0) {
elements_values[i].element.style.color = "red";
elements_values[i].element.style.backgroundColor = "#cccccc";
elements_values[i].element.style.fontWeight = "bold";
} else {
elements_values[i].element.style.color = "black";
elements_values[i].element.style.backgroundColor = "#eeeeee";
elements_values[i].element.style.fontWeight = "normal";
}
}
}
function dealChange(e){
getElementsValues();
styleObject();
}
getHTMLElements();
getElementsValues();
//logObjects();
styleObject();<input id="in1" type="number" value="0.9" step="0.1" min="-10" max="10">
<input id="in2" type="number" value="2" step="0.1" min="-10" max="10">
<input id="in3" type="number" value="0.3" step="0.1" min="-10" max="10">
<input id="in4" type="number" value="0" step="0.1" min="-10" max="10">
<input id="in5" type="number" value="1.5" step="0.1" min="-10" max="10">
<input id="in6" type="number" value="6.67" step="0.1" min="-10" max="10">
<input id="in7" type="number" value="0" step="0.1" min="-10" max="10">
<input id="in8" type="number" value="8.02" step="0.1" min="-10" max="10">
<input id="in9" type="number" value="9.88" step="0.1" min="-10" max="10">
<input id="in10" type="number" value="-0.6" step="0.1" min="-10" max="10">