根据最高数字突出显示 div
Posted
技术标签:
【中文标题】根据最高数字突出显示 div【英文标题】：Highlight div based on highest number 【发布时间】：2021-11-07 21:48:17 【问题描述】：我试图突出显示 div 中的一个值，该值是数组中的最小值。
当用户完成每个输入行（设计出口和实际出口）时，将调用 outletIndex() 函数，该函数计算百分比并将值推送到数组中。这部分我正在工作。
然后我要做的是找到该数组中的最小数字并突出显示 div（比例）。我希望这是动态的，以便用户完成每个输入行，计算百分比并逐渐突出显示最低索引值。
我正在使用 querySelectorAll() 将 div 类值匹配到最低索引值，但我不确定是否需要解析 nodeList 以匹配 indexArray 的值？
我还想知道，如果在字段中输入错误并将其添加到索引数组中，并且它恰好是最低索引，它将不会匹配 html 上显示的索引值并且不会调用该函数。
document.querySelector('#outlet_actual_1').addEventListener('keypress', function(e)
if (e.key === 'Enter')
let actual = document.getElementById("outlet_actual_1").valueAsNumber || 0;
let design = document.getElementById("outlet_design_1").valueAsNumber || 0;
let result1 = outletIndex(actual, design);
if (!isNaN(result1))
document.getElementById("percentage").textContent = `$result1.toFixed(1)%`;
);
document.querySelector('#outlet_actual_2').addEventListener('keypress', function(e)
if (e.key === 'Enter')
let actual = document.getElementById("outlet_actual_2").valueAsNumber || 0;
let design = document.getElementById("outlet_design_2").valueAsNumber || 0;
let result1 = outletIndex(actual, design);
if (!isNaN(result1))
document.getElementById("percentage2").textContent = `$result1.toFixed(1)%`;
);
document.querySelector('#outlet_actual_3').addEventListener('keypress', function(e)
if (e.key === 'Enter')
let actual = document.getElementById("outlet_actual_3").valueAsNumber || 0;
let design = document.getElementById("outlet_design_3").valueAsNumber || 0;
let result1 = outletIndex(actual, design);
if (!isNaN(result1))
document.getElementById("percentage3").textContent = `$result1.toFixed(1)%`;
);
const indexArray = [];
function outletIndex(a, b)
let result = a / b * 100;
if (!isNaN(result))
indexArray.push(+result.toFixed(2));
indexFindandHighlight();
console.log(indexArray, result);
return result;
function indexFindandHighlight()
const lowestIndex = Math.min(...indexArray);
const indexCheck = document.querySelectorAll('.proportion').valueAsNumber || 0;
console.log(lowestIndex);
if (lowestIndex == indexCheck)
$(document).ready(function()
$("#outlet_actual_1", "#outlet_actual_2", "#outlet_actual_3").onchange(function()
$(".proportion").effect( "highlight", color:"#669966", 3000 );
);
);
; <table>
<tr>
<div class="form-group row 1" id="outlets1">
<td><label
>Outlet Design</label>
<input
name = "outlet 1 design"
class="form-control design_1"
id="outlet_design_1"
type="number"
placeholder="Outlet 1 Design"
onkeydown="outletIndex();"
/>
</td>
<td><label
>Outlet Actual</label>
<input
name="outlet 1 actual"
class="form-control actual_1"
id="outlet_actual_1"
type="number"
placeholder="Outlet 1 Actual"
onkeydown="outletIndex();"
/>
</td>
<td><label
>Outlet Balance</label>
<input
name="outlet_balance"
class="form-control"
input value=""
id="outlet_balance_1"
type="text"
placeholder="Outlet 1 Balance"
/>
</td><td>
<div class="proportion" id="percentage">
</div>
</td>
</div>
</tr>
<tr>
<div class="form-group row 2" id="outlets2">
<td>
<input
name="outlet_design"
class="form-control design_2"
id="outlet_design_2"
type="number"
placeholder="Outlet 2 Design"
onkeydown="outletIndex();"
/>
</td>
<td>
<input
name="outlet_actual"
class="form-control actual_2"
id="outlet_actual_2"
type="number"
placeholder="Outlet 2 Actual"
onkeydown="outletIndex();"
/>
</td>
<td>
<input
name="outlet_balance"
class="form-control"
id="outlet_balance_2"
type="number"
placeholder="Outlet 2 Balance"
/>
</td><td>
<div class="proportion" id="percentage2">
</div>
</td>
</div></tr>
<tr>
<div class="form-group row 3" id="outlets3">
<td>
<input
name="outlet_design"
class="form-control design_3"
id="outlet_design_3"
type="number"
placeholder="Outlet 3 Design"
onkeydown="outletIndex();"
/>
</td>
<td>
<input
name="outlet_actual"
class="form-control actual_3"
id="outlet_actual_3"
type="number"
placeholder="Outlet 3 Actual"
onkeydown="outletIndex();"
/>
</td>
<td>
<input
name="outlet_balance"
class="form-control"
id="outlet_balance_3"
type="number"
placeholder="Outlet 3 Balance"
/>
</td><td>
<div class="proportion" id="percentage3">
</div>
</td>
</div></tr>
</div>
</table>
</fieldset>
</form>
</div>【问题讨论】：
【参考方案1】：多个问题：
-
清理 HTML
重用代码
一致性，使用 jquery 或 javascript
将 UI 更改与数据更改分开。
一致性，使用 HTML 或 javascript 文件绑定事件侦听器。
请查看以下示例
const number = (str) => Number(str) || 0;
const bind = (id) =>
function onBind(e)
let actual = number(document.querySelector(`#outlet_actual_$id`).value);
let design = number(document.querySelector(`#outlet_design_$id`).value);
let result1 = percentage(actual, design);
if (!isNaN(result1))
document.querySelector(
`#percentage_$id`
).textContent = `$result1.toFixed(1)%`;
updateIndex(id, result1);
highlight();
document
.querySelector(`#outlet_actual_$id`)
.addEventListener("change", onBind);
document
.querySelector(`#outlet_design_$id`)
.addEventListener("change", onBind);
;
function percentage(a, b)
return b === 0 ? 0 : (a / b) * 100;
let percentages = [];
function updateIndex(id, value)
percentages[id - 1] = value;
function highlight()
let minIndex = -1;
let minValue = Number.MAX_SAFE_INTEGER;
for (let index in percentages)
if (percentages[index] < minValue)
minIndex = Number(index);
minValue = percentages[index];
if (minIndex === -1) return;
document.querySelector(`#percentage_$minIndex + 1`).style.color = "red";
setTimeout(() =>
document.querySelector(`#percentage_$minIndex + 1`).style.color = "black";
, 3000);
bind(1);
bind(2);
bind(3);<table>
<tr>
<div class="form-group row 1" id="outlets1">
<td><label
>Outlet Design</label>
<input
name = "outlet 1 design"
class="form-control design_1"
id="outlet_design_1"
type="number"
placeholder="Outlet 1 Design"
/>
</td>
<td><label
>Outlet Actual</label>
<input
name="outlet 1 actual"
class="form-control actual_1"
id="outlet_actual_1"
type="number"
placeholder="Outlet 1 Actual"
/>
</td>
<td><label
>Outlet Balance</label>
<input
name="outlet_balance"
class="form-control"
input value=""
id="outlet_balance_1"
type="text"
placeholder="Outlet 1 Balance"
/>
</td><td>
<div class="proportion" id="percentage_1">
</div>
</td>
</div>
</tr>
<tr>
<div class="form-group row 2" id="outlets2">
<td>
<input
name="outlet_design"
class="form-control design_2"
id="outlet_design_2"
type="number"
placeholder="Outlet 2 Design"
/>
</td>
<td>
<input
name="outlet_actual"
class="form-control actual_2"
id="outlet_actual_2"
type="number"
placeholder="Outlet 2 Actual"
/>
</td>
<td>
<input
name="outlet_balance"
class="form-control"
id="outlet_balance_2"
type="number"
placeholder="Outlet 2 Balance"
/>
</td><td>
<div class="proportion" id="percentage_2">
</div>
</td>
</div></tr>
<tr>
<div class="form-group row 3" id="outlets3">
<td>
<input
name="outlet_design"
class="form-control design_3"
id="outlet_design_3"
type="number"
placeholder="Outlet 3 Design"
/>
</td>
<td>
<input
name="outlet_actual"
class="form-control actual_3"
id="outlet_actual_3"
type="number"
placeholder="Outlet 3 Actual"
/>
</td>
<td>
<input
name="outlet_balance"
class="form-control"
id="outlet_balance_3"
type="number"
placeholder="Outlet 3 Balance"
/>
</td><td>
<div class="proportion" id="percentage_3">
</div>
</td>
</div></tr>
</div>
</table>
</fieldset>
</form>
</div>【讨论】：
我同意我希望只使用 vanilla JS，因为我仍在学习如何编写 JS 和 HTML。谢谢你的帮助。代码按我的意愿工作，我没想到有人会为我编写它......我也不认为我离我很远，哈哈，但显然我是。以上是关于根据最高数字突出显示 div的主要内容，如果未能解决你的问题，请参考以下文章