有没有办法组合这些类似的 jQuery 事件侦听器功能？

马修

我有多个 jquery 事件侦听器函数，它们根据输入框中是否有任何输入来显示或隐藏复选标记按钮。除了 ID 名称外，这些功能实际上是相同的。我想知道是否有一种方法可以将这些类似的功能组合成一个，也许使用 for 循环或 forEach 方法？非常感谢有关如何实现这一目标的任何建议！下面列出了代码，但我也制作了一个 codepen 示例。

$("#chwValue").on("input", function() {
  $("#addChw").removeAttr("style");
  if ($(this).val() === "") {
    $("#addChw").hide();
  }
});

$("#eleValue").on("input", function() {
  $("#addEle").removeAttr("style");
  if ($(this).val() === "") {
    $("#addEle").hide();
  }
});

$("#stmValue").on("input", function() {
  $("#addStm").removeAttr("style");
  if ($(this).val() === "") {
    $("#addStm").hide();
  }
});

$("#hhwValue").on("input", function() {
  $("#addHhw").removeAttr("style");
  if ($(this).val() === "") {
    $("#addHhw").hide();
  }
});

$("#gasValue").on("input", function() {
  $("#addGas").removeAttr("style");
  if ($(this).val() === "") {
    $("#addGas").hide();
  }
});

$("#wtrValue").on("input", function() {
  $("#addWtr").removeAttr("style");
  if ($(this).val() === "") {
    $("#addWtr").hide();
  }
});

$("#peakChwValue").on("input", function() {
  $("#addPeakChw").removeAttr("style");
  if ($(this).val() === "") {
    $("#addPeakChw").hide();
  }
});

$("#laborValue").on("input", function() {
  $("#addLabor").removeAttr("style");
  if ($(this).val() === "") {
    $("#addLabor").hide();
  }
});

.checkMark:hover {
  cursor: pointer;
  transition: transform 0.2s;
  transform: scale(1.1)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<table id="tableData" class="table text-light text-end table-borderless inputTable">
  <thead>
    <tr class='text-center bordered'>
      <th></th>
      <th class="bordered" scope="col">CHW
        <span class='units'>[tonhr]</span>
      </th>
      <th class="bordered" scope="col">ELE
        <span class='units'>[kWh]</span>
      </th>
      <th class="bordered" scope="col">STM
        <span class='units'>[lb]</span>
      </th>
      <th class="bordered" scope="col">HHW
        <span class='units'>[mmbtu]</span>
      </th>
      <th class="bordered" scope="col">GAS
        <span class='units'>[CCF]</span>
      </th>
      <th class="bordered" scope="col">WTR
        <span class='units'>[kgal]</span>
      </th>
      <th class="bordered" scope="col">Peak CHW
        <span class='units'>[ton]</span>
      </th>
      <th class="bordered" scope="col">Labor
        <span class='units'>[Hours]</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th style="width: 100px" class="bordered">Baseline</th>
      <td class="text-center inputBorder">
        <input type="text" id="chwValue" class="chwInput">
      </td>
      <td class="text-center inputBorder">
        <input type="text" id="eleValue" class="eleInput">
      </td>
      <td class="text-center inputBorder">
        <input type="text" id="stmValue" class="stmInput">
      </td>
      <td class="text-center inputBorder">
        <input type="text" id="hhwValue" class="hhwInput">
      </td>
      <td class="text-center inputBorder">
        <input type="text" id="gasValue" class="gasInput">
      </td>
      <td class="text-center inputBorder">
        <input type="text" id="wtrValue" class="wtrInput">
      </td>
      <td class="text-center inputBorder">
        <input type="text" id="peakChwValue" class="peakChwInput">
      </td>
      <td class="text-center inputBorder">
        <input type="text" id="laborValue" class="laborInput">
      </td>
    </tr>
    <tr class='text-center borderTop'>
      <td></td>
      <td>
        <i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
      </td>
      <td>
        <i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
      </td>
      <td>
        <i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
      </td>
      <td>
        <i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
      </td>
      <td>
        <i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
      </td>
      <td>
        <i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
      </td>
      <td>
        <i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
      </td>
      <td>
        <i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark"></i>
      </td>
    </tr>
  </tbody>
</table>

钽

你可以尝试这样的事情：

var mappings = { //Need a better name
  '#chwValue': '#addChw',
  '#hhwValue': '#addHhw'
  // Add the rest of the mappings here
}

Object.keys(mappings).forEach(function(key) {
  var value = mappings[key];
  $(key).on("input", function() {
    $(value).removeAttr("style");
    if ($(this).val() === "") {
      $(value).hide();
    }
  });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。