Question

我有3组输入，按时间顺序排列（制造商信息，维修信息，测试信息）。当用户点击“确认按钮”时，我想要一个if语句遍历每个输入，比较if (input.val() !== "")，然后确保它是最新数据（即，维修信息将取代mfg信息），然后将值推入#asreceived字段。

我已经为要迭代的每组输入手动执行了if语句，但是如果我想输入更多字段，则必须添加到该函数中。

这是我目前拥有的：

  $("#model-received").val(function() {
    if ($("#model-test").val() != "") {
      return $("#model-testonly").val();
    } else if ($("#model-repair").val() != "") {
      return $("#model-repair").val();
    } else {
      return $("#model-initial").val();
    }
  });

我已经为每组输入（大约50个）使用了此代码

我试图使用.each（）比较组，但是我被困在这里。

let $inputMfg = $("#manufacturers-tag").find("input , select").each(function() {
      if ($(this).attr("name").indexOf("-initial") > -1) {
        return
      }
    });
let $inputRep = $("#repairtag-old").find("input , select").each(function() {
      if ($(this).attr("name").indexOf("-repair") > -1) {
        return
      }
    });
let $inputTO = $("#testonlytag-old").find("input , select").each(function() {
      if ($(this).attr("name").indexOf("-testonly") > -1) {
        return
      }
    });
let $inputAsRec = $("#asreceived").find("input , select").each(function() {
      if ($(this).attr("name").indexOf("-received") > -1) {
        return
      }
    });

$("#asreceived"),$("#testonlytag-old"),$("#repairtag-old"),$("#manufacturers-tag")都是相同的HTML，减去每个输入的名称后缀（“ -initial”）

HTML

<div id="repairtag-old" hidden>
            <div class="entry-col3">
              <div class="entry-line">
                <label class="entry-label">Company: </label>
                <input class="entry-input" type="text" name="company-repair">
              </div>
            </div>
            <div class="entry-col3">
              <div class="entry-line">
                <label class="entry-label">Date: </label>
                <input class="entry-date" type="date" name="date-repair">
              </div>
            </div>
            <div class="entry-col3">
              <div class="entry-line">
                <label class="entry-label">VR Stamp: </label>
                <select class="entry-select" id="vrstamp-old" name="vrstamp-old">
                  <option></option>
                  <option>Yes</option>
                  <option>No</option>
                </select>
                <label class="entry-bylabel">VR: </label>
                <input class="entry-input" type="text" name="vrnumber-old">
              </div>
            </div>
            <div class="entry-col2">
              <div class="entry-line">
                <label class="entry-label">Job Number: </label>
                <input class="entry-input" type="text" name="jobnumber-repair">
              </div>
            </div>
            <div class="entry-col2">
              <div class="entry-line">
                <label class="entry-label">Model Number: </label>
                <input class="entry-input" id="model-repair" type="text" name="model-repair">
              </div>
            </div>
            <div class="entry-col3">
              <div class="entry-line">
                <label class="entry-label">Set Pressure: </label>
                <input class="entry-input" id="setpressure-repair" type="text" name="setpressure-repair">
                <select class="entry-select" name="setunit-repair">
                  <option>psig</option>
                </select>
              </div>
            </div>
            <div class="entry-col3">
              <div class="entry-line">
                <label class="entry-label">Cold Test Pressure: </label>
                <input class="entry-input" type="text" name="coldpressure-repair">
                <select class="entry-select" name="coldunit-repair">
                  <option>psig</option>
                </select>
              </div>
            </div>
            <div class="entry-col3">
              <div class="entry-line">
                <label class="entry-label">Capacity: </label>
                <input class="entry-input" type="text" name="capacity-repair">
                <select class="entry-select" name="capacityunit-repair">
                  <option>scfm</option>
                </select>
              </div>
            </div>
            <br>
          </div>

最终结果应推入最重要的值（仅测试1，修复2，制造3）。如果为(input.val === "")，则应使用旧值。

---更新---

我知道了。下面的代码段。谢谢您的回答，我有点想尝试实现它们（我是编码新手）。但是，马克·迈耶（Mark Meyer）的回应使我步入正轨。这完全符合预期。

$("#copybtn-received").click(function(i) {
    $("#asreceived").find("input, select").each(function() {
      let $output = $(this).attr("name").split("-received")[0];
      let $inputTO = $("#testonlytag-old").find("[name^=" + $output + "]");
      let $inputRep = $("#repairtag-old").find("[name^=" + $output + "]");
      let $inputMfg = $("#manufacturers-tag").find("[name^=" + $output + "]");
      if ($inputTO.val() !== "") {
        $(this).val($inputTO.val());
      } else if ($inputRep.val() !== "") {
        $(this).val($inputRep.val());
      } else if ($inputMfg.val() !== "") {
        $(this).val($inputMfg.val());
      } else {
        $(this).val("");
      }
    });
  });

Answer 1

您可以将值按所需的优先顺序放入数组中，然后使用find()返回找到的第一个值。在find回调中，仅返回值是否为true，""不是。这样一来，您就可以在不使用所有if/else语句的情况下决定任意顺序。

这是一个简化的示例。它将记录填充的最大值。

function getBest(){
  /* values in the order values will be found */
  let values = [
    document.getElementById("one").value,
    document.getElementById("two").value,
    document.getElementById("three").value,
    document.getElementById("four").value
  ]

  /* find the first truthy value */
  let best = values.find(val => val)

  console.log(best)
}

<input id="one" type ="text"><br />
<input id="two" type ="text"><br />
<input id="three" type ="text"><br />
<input id="four" type ="text"><br />


<button onclick="getBest()">Go</button>

Answer 2

我不确定我是否正确理解了这个问题，所以这有点猜测。也许像这样会发生什么？：

const findFirst = (ids, idx = ids.find(id => $(`#${id}`).val() !== '')) =>
    idx > -1 ? $(`#${id}`).val() : 'not found'

$("#model-received").val(findFirst(
    ['model-testonly', 'model-repair', 'model-initial']
))

然后可以通过简单地追加到该数组来更新列表。而且，如果'model-'前缀是通用的，则可以在函数中包括该前缀，并且仅在调用中传递['testonly', 'repair', 'initial']。

我不知道您的默认设置是否比这里的“未找到”更好。

仅会推送最新输入值的函数

2 个答案: