时间戳

首页 > 解决方案 > 根据最高数字突出显示 div

javascript - 根据最高数字突出显示 div

问题描述

我试图突出显示 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>

标签： javascripthtmljqueryarrayshighlight

解决方案

多个问题：

  1. 清理 HTML
  2. 重用代码
  3. 一致性，使用 jquery 或 javascript
  4. 将 UI 更改与数据更改分开。
  5. 一致性，使用 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>

推荐阅读