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

Question

我有多个 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>

Answer 1

为了以更 DRY 的方式实现这一点，您可以通过索引关联列中的单元格。 当input元素引发input事件时，您可以在父tr捕获其索引，然后通过相同的索引从下一行检索相应的图标单元格。 像这样的东西：

 let $iconCells = $('.icon-row td'); $('.input-row input').on('input', e => { let $input = $(e.target) let index = $input.closest('td').index(); $iconCells.eq(index).find('i').toggle($input.val().length > 0); });

 .checkMark:hover { cursor: pointer; transition: transform 0.2s; transform: scale(1.1) } .icon-row i { display: none; }

 <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 class="input-row"> <th style="width: 100px" class="bordered">Baseline</th> <td class="text-center inputBorder"> <input type="text" name="chwValue" class="chwInput" /> </td> <td class="text-center inputBorder"> <input type="text" name="eleValue" class="eleInput" /> </td> <td class="text-center inputBorder"> <input type="text" name="stmValue" class="stmInput" /> </td> <td class="text-center inputBorder"> <input type="text" name="hhwValue" class="hhwInput" /> </td> <td class="text-center inputBorder"> <input type="text" name="gasValue" class="gasInput" /> </td> <td class="text-center inputBorder"> <input type="text" name="wtrValue" class="wtrInput" /> </td> <td class="text-center inputBorder"> <input type="text" name="peakChwValue" class="peakChwInput" /> </td> <td class="text-center inputBorder"> <input type="text" name="laborValue" class="laborInput" /> </td> </tr> <tr class="text-center borderTop icon-row"> <td></td> <td><i class="far fa-check-circle fa-3x checkMark"></i></td> <td><i class="far fa-check-circle fa-3x checkMark"></i></td> <td><i class="far fa-check-circle fa-3x checkMark"></i></td> <td><i class="far fa-check-circle fa-3x checkMark"></i></td> <td><i class="far fa-check-circle fa-3x checkMark"></i></td> <td><i class="far fa-check-circle fa-3x checkMark"></i></td> <td><i class="far fa-check-circle fa-3x checkMark"></i></td> <td><i class="far fa-check-circle fa-3x checkMark"></i></td> </tr> </tbody> </table>

Answer 2

给所有输入一个公共类。 给他们一个引用相关addXxx元素的属性。

 $(".inputValue").on("input", function() { let rel = $($(this).data("add")); rel.removeAttr("style"); if ($(this).val() === "") { rel.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> <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 inputValue" data-add="#addChw"> </td> <td class="text-center inputBorder"> <input type="text" id="eleValue" class="eleInput inputValue" data-add="#addEle"> </td> <td class="text-center inputBorder"> <input type="text" id="stmValue" class="stmInput inputValue" data-add="#addStm"> </td> <td class="text-center inputBorder"> <input type="text" id="hhwValue" class="hhwInput inputValue" data-add="#addHhw"> </td> <td class="text-center inputBorder"> <input type="text" id="gasValue" class="gasInput inputValue" data-add="#addGas"> </td> <td class="text-center inputBorder"> <input type="text" id="wtrValue" class="wtrInput inputValue" data-add="#addWtr"> </td> <td class="text-center inputBorder"> <input type="text" id="peakChwValue" class="peakChwInput inputValue" data-add="#addPeakChw"> </td> <td class="text-center inputBorder"> <input type="text" id="laborValue" class="laborInput inputValue" data-add="#addLabor"> </td> </tr> <tr class='text-center borderTop'> <td></td> <td> <i id="addChw" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i> </td> <td> <i id="addEle" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i> </td> <td> <i id="addStm" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i> </td> <td> <i id="addHhw" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i> </td> <td> <i id="addGas" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i> </td> <td> <i id="addWtr" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i> </td> <td> <i id="addPeakChw" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i> </td> <td> <i id="addLabor" style="display: none" class="far fa-check-circle fa-3x checkMark">x</i> </td> </tr> </tbody> </table>

Answer 3

你可以尝试这样的事情：

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();
    }
  });
});

Answer 4

将关系存储在对象数组中并进行迭代。

 let objs = [ {'chwValue': 'addChw'}, {'eleValue': 'addEle'}, {'stmValue': 'addStm'}, {'hhwValue': 'addHhw'}, {'gasValue': 'addGas'}, {'wtrValue': 'addWtr'}, {'peakChwValue': 'addPeakChw'}, {'laborValue': 'addLabor'}]; objs.forEach(e => { let [input, el] = Object.entries(e)[0]; $(`#${input}`).on("input", function() { $(`#${el}`).removeAttr("style"); if ($(this).val() === "") $(`$${el}`).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" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <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>

Answer 5

这个怎么样？

$("#chwValue, #eleValue, #stmValue, #hhwValue, #gasValue, #wtrValue, #peakChwValue, #laborValue").on("input", function() {

  //get the id selector from the id value (everything before 'Value')
  let idName = $(this).attr('id').split('Value')[0]

  //capitalize the first character
  idName = idName[0].toUpperCase() + idName.slice(1);

  //add the id selector dynamically
  $("#add"+idName).removeAttr("style");
  if ($(this).val() === "") {
    $("#add"+idName).hide();
  }
});

 $("#chwValue, #eleValue, #stmValue, #hhwValue, #gasValue, #wtrValue, #peakChwValue, #laborValue").on("input", function() { //get the id selector from the id value (everything before 'Value') let idName = $(this).attr('id').split('Value')[0] //capitalize the first character idName = idName[0].toUpperCase() + idName.slice(1); //add the id selector dynamically $("#add"+idName).removeAttr("style"); if ($(this).val() === "") { $("#add"+idName).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>